[英]How can I update a React state with an object?
我正在尝试使用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>
);
};
“对象作为React子对象无效”
您正在尝试渲染对象<div>{data}</div>
。
尝试<div>{JSON.stringify(data)}</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.