#arrays #reactjs #object #children
Вопрос:
constructor(props) {
super(props);
this.state = {
message: []
};
}
async getData() {
await axios.get("https:...")
.then((response) => {
console.log((response));
console.log(typeof(response)); // object
const convertString = JSON.parse(response.data.body);
this.setState({message: convertString});
console.log(convertString));
})
}
componentDidMount() {
this.getData();
}
render() {
const obj = (this.state.message);
console.log(obj);
return(
<div>
{this.state.message}
</div>
)
Я получаю сообщение об ошибке: «Ошибка: Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {Элементы, количество, количество сканирований}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.»
console.log(строка преобразования) дает мне это:
Items: Array(4)
0: {key1: "value", key2: "value"}
1: {key1: "value", key2: "value"}
2: {key1: "value", key2: "value"}
3: {key1: "value", key2: "value"}
Как я должен передавать данные через this.setState (), если я хочу отобразить массив в табличном формате?
Ответ №1:
Ваш ответ, как вы видите, представляет собой массив объектов.Вы должны выполнить циклический переброс через этот массив, например, для отображения данных в корре.
render() {
return(
<div>
{this.state.message.map((item,i) => (
<div key={i}>
<div>{item.key1}</div>
<div>{item.key2}</div>
</div>
)}
</div>
)
}
в методе {this.state.message.map} вы запускаете цикл внутри массива сообщений ( содержит 4 объекта), и каждый (элемент) имеет свойства, которые вы хотите отобразить.
Комментарии:
1. Я получаю ошибку: это.состояние.сообщение.карта не является функцией
2. вы удалили две строки после render() ? const obj = (это.состояние.сообщение); console.log(obj);
3. с 2 строками или без них я получаю ту же ошибку
4. замените свой . затем очередь.. пока не появится console.log(строка преобразования) с этим.. .затем((ответ) => response.json()) .затем(Список сообщений=>> { this.setState({ сообщение: список сообщений});