Question

我正在尝试使用axios将新状态传递给另一个组件来更新React组件中的状态。这是我的代码如下：

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>。

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

如何使用对象更新React状态？

1 个答案: