Как я могу обновить состояние React с помощью объекта?

Question

Я пытаюсь обновить состояние в компоненте React, используя axios, чтобы передать новое состояние в другой компонент.Вот мой код ниже:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      list: [],
      data: []
    }

    this.dataById = this.dataById.bind(this);
  }

  dataById(e) {
    this.setState({ idToGet: e.target.value});
    if (!isNaN(parseInt(e.target.value))) {
      axios.get(`http://localhost:5000/message/${e.target.value}`)
        .then(res => {
          const data = res.data;
          this.setState({ data });
        });
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">React App</h1>
        </header>
        <section>
          <List data={this.state.data} dataById={this.dataById}/> 
        </section>
      </div>
    );
  }
}

Когда я попытался обновить состояние с помощью axios, я получил сообщение об ошибке «Объекты недопустимы как дочерние элементы React».Я проверил, что я связал функцию dataById.

Однако я хочу использовать объект, который я получаю из axios, и передать этот объект в мой List компонент.

Как мне это сделать?Есть ли способ обойти ошибку и все же передать объект в мой List компонент?

Редактировать: Вот List компонент

import React from 'react';

export default ({ data, dataById }) => {
  return (
    <div>
      <div className="row">
        <div className="col-xs-12">
          <div className="chat">
            <div className="col-xs-5 col-xs-offset-3">
              <input
                type="text"
                placeholder="Enter id"
                className="form-control"
                onChange={dataById}
                onKeyDown={dataById}
              />
            </div>
            <div className="clearfix"></div>
          </div>
        </div>
        <div>{data}</div>
      </div>
    </div>
  );
};

Answer 1

"Объекты недопустимы как дочерние элементы React"

Вы пытаетесь визуализировать объект <div>{data}</div>.

try <div>{JSON.stringify(data)}</div>