ReactJS 状态更新落后一步

Question

我正在尝试使用 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>
    )
  }
}

我在这里遇到的两个问题是:

从逻辑上讲，我应该能够从 componentDidMount() 中调用 this.getData()，但是如果我这样做，表不会加载。

每当我尝试删除一行时，即使该条目已从数据库中删除，该表也不会反射(reflect)更新。表格只会在我刷新页面或删除另一行时更新。问题是，该组件总是落后 1 次更新。

到目前为止，我已经尝试过:

this.forceUpdate() - 不起作用

this.setState({}) - 空的 setState 也不起作用

改变 componentDidMount()至 componentDidUpdate() - 错误显示我已经“达到最大深度”或沿着这条线的东西

在 axios 前面添加异步等待 - 不起作用

任何帮助表示赞赏。提前致谢。

编辑 :我进行了一些调试并找到了与我的问题无关的问题。我的 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()到路由代码。

Answer 1

您应该将数据映射到您的 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 >
    )