Как заполнить массив React из серверной части JSON Nodejs
Я новичок в React. Я установил серверную часть Nodejs, которая читает файл JSON в следующем формате:
{
"cert1" : {
"name" : "www.google.com",
"state" : "valid",
"days" : "482"
},
"cert2" : {
"name" : "www.facebook.com",
"state" : "valid",
"days" : "182"
},
.
.
.
}
Я хочу отобразить эти данные в таблице, и сначала мне нужно поместить их в массив. Мне удалось отобразить www.google.com, используя следующий код.
class App extends Component {
state = {
name : '',
state : '',
days : '',
response : ''
};
componentDidMount() {
this.callApi()
.then(res => {
this.setState({
response: res.cert1.name
})
})
.catch(err => console.info(err));
}
callApi = async () => {
const response = await fetch('/list-certs');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
render() {
return (
<div className = "App">
<div className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h2>Welcome to React</h2>
</div>
<p className = "App-intro">
{this.state.response}
</p>
</div>
);
}
}
Как мне отобразить весь файл JSON и заполнить некоторые массивы всеми записями? Прямо сейчас я звоню res.cert1.name, но каждая запись сертификата в файле JSON имеет другое имя (cert1, cert2, cert3 и т. д.), Так как мне преобразовать res.cert1.name в общий вызов для любой записи сертификата в файле JSON?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать Object.keys и Array.map, чтобы построить массив из вашего объекта JSON и сопоставить его для рендеринга ваших элементов.
Образец:
class App extends Component {
state = {
name : '',
state : '',
days : '',
response : []
};
componentDidMount() {
this.callApi()
.then(res => {
this.setState({
response: Object.keys(res).map(key=>({...res[key], id:key}))
})
})
.catch(err => console.info(err));
}
callApi = async () => {
const response = await fetch('/list-certs');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
render() {
return (
<div className = "App">
<div className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h2>Welcome to React</h2>
</div>
<p className = "App-intro">
{this.state.response.map(item => (<p>{item.name}</p>))}
</p>
</div>
);
}
}
спасибо за помощь, но я получал ошибку в браузере, говоря, что карта не является функцией
Извините, ответ был инициализирован как строка. Отредактированный ответ. Ошибка была в этой строке, верно? {this.state.response.map(item => (<p>{item.name}</p>))}
Думаю, да, я изменил свой файл JSON на формат массива, как было предложено выше, и изменил свою переменную ответа на пустой список
Если ваш JSON теперь является массивом, вы можете пропустить бит Object.keys().... в своем методе componentDidMount.
В идеале вы хотите, чтобы ваш JSON был массивом, а не объектом объектов:
[
{
"name" : "www.google.com",
"state" : "valid",
"days" : "482"
}, {
"name" : "www.facebook.com",
"state" : "valid",
"days" : "182"
}
]
Затем в интерфейсе вы можете получить имя каждого сертификата с помощью res.map(x => x.name)
В идеале вы хотите, чтобы результаты json были массивом.
при извлечении из API вы можете установить состояние с результатами.
это зависит от того, как выглядит ваш api, однако, если вы вернете свой json-объект с массивом элементов в нем и сохраните его в состоянии ....
componentDidMount() {
this.callApi()
.then(res => {
this.setState({
results: res.body
})
})
.catch(err => console.info(err));
}
Затем вы можете выполнить функцию карты в своем рендере.
render() {
return (
<div className = "App">
<div className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h2>Welcome to React</h2>
</div>
<p className = "App-intro">
{ this.state.results.map((row) => {
return <p>{row.name}</p>
}) }
</p>
</div>
);
}
Надеюсь это поможет.
спасибо за помощь, но в браузере появляется сообщение об ошибке: App.js: 44 Uncaught TypeError: this.state.response.map не является функцией в App.render (App.js: 44) в ReactCompositeComponent. js: 793 в measureLifeCyclePerf (ReactCompositeComponent.js: 74)
Я изменил переменную ответа на массив, и теперь ошибки нет, но ничего не отображается
Привет @ tnoel999888, это может быть потому, что результаты состояния не являются массивом для начала ... в установленном состоянии используйте this.setState ({results: []}); Также убедитесь, что ответ от сервера возвращается в виде массива, а не объекта.
возможный дубликат stackoverflow.com/questions/38742334/…