我正在尝试使用 ReactJS 创建一个简单的表来显示用户信息。下面是一般代码结构的样子:
class ParentComponent extends React.Component {
state = {
data : []
}
componentDidMount() {
// initializes state with data from db
axios.get("link/").then(res => {
this.setState({data: res.data});
});
// I should be able to call this.getData() instead
// of rewriting the axios.get() function but if I do so,
// my data will not show up
}
// retrieves array of data from db
getData = () => {
axios.get("link/").then(res => {
this.setState({data: res.data});
});
}
render() {
return (
<div>
<ChildComponent data={this.state.data} refetch={this.getData} />
</div>
)
}
}
每个生成的行都应该有一个删除函数,我将根据给定的 id 从数据库中删除条目。删除后,我想从父组件中检索最新数据以重新显示。class ChildComponent extends React.Component {
// deletes the specified entry from database
deleteData = (id) => {
axios.get("deleteLink/" + id).then(res => {
console.log(res);
// calls function from parent component to
// re-fetch the latest data from db
this.props.refetch();
}).catch(err => {console.log(err)});
}
render() {
let rows = null;
if(this.props.data.length) {
// map the array into individual rows
rows = this.props.data.map(x => {
return (
<tr>
<td>{x.id}</td>
<td>{x.name}</td>
<td>
<button onClick={() => {
this.deleteData(x.id)
}}>
Delete
</button>
</td>
</tr>
)
})
}
return (
<div>
<table>
<thead></thead>
<tbody>
{rows}
</tbody>
</table>
</div>
)
}
}
我在这里遇到的两个问题是:到目前为止,我已经尝试过:
this.forceUpdate()
- 不起作用 this.setState({})
- 空的 setState 也不起作用 componentDidMount()
至 componentDidUpdate()
- 错误显示我已经“达到最大深度”或沿着这条线的东西任何帮助表示赞赏。提前致谢。
编辑 :我进行了一些调试并找到了与我的问题无关的问题。我的
deleteData()
位于 ChildComponent 中的使用 axios.post()
而不是 axios.get()
,我忽略了。deleteData = (id) => {
axios.post("deleteLink/", id).then(res => {
console.log(res);
// calls function from parent component to
// re-fetch the latest data from db
this.props.refetch();
}).catch(err => {console.log(err)});
}
为了axios.post()
返回响应,以执行 .then()
,您需要添加 res.json()
到路由代码。
最佳答案
您应该将数据映射到您的 child 。
像这样改变你的 parent :
class ParentComponent extends React.Component {
state = {
data : []
}
componentDidMount() {
this.getData();
}
getData = () => axios.get("link/").then(res => this.setState({data: res.data});
deleteData = (id) => axios.get("deleteLink/" + id).then(res => this.getData())
.catch(err => { console.log(err) });
render() {
return (
<div>
<table>
<thead></thead>
<tbody>
{this.state.data.map(x => <ChildComponent row={x} deleteData={this.deleteData} />)}
</tbody>
</table>
</div>
)
}
}
你的子组件应该是这样的const ChildComponent = ({row,deleteData}) => (
<tr>
<td>{row.id}</td>
<td>{row.name}</td>
<td><button onClick={() => deleteData(row.id)}>Delete</button></td>
</tr >
)
关于ReactJS 状态更新落后一步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65547400/