Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив

#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({ сообщение: список сообщений});