ReactJS 状态更新落后一步

标签 reactjs axios jsx

我正在尝试使用 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()到路由代码。

    最佳答案

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

    相关文章:

    reactjs - react : Access child element with findDOMNode throws error

    javascript - 使用 React JS 实现状态码为 404 时的 catch

    javascript - 将数据传递给 react 中的另一个组件

    reactjs - react 引导导航栏填充

    javascript - 将逻辑应用于 defaultProps

    exception - vue axios Uncaught (in promise) 取消

    javascript - Vue 警告 : Error in created hook: "TypeError: Cannot read property ' get' of undefined"

    node.js - vuejs 2 axios 放置,删除

    javascript - 尝试在react jsx中给常量一个this.state

    javascript - 如何在渲染后根据另一个状态使用 setState 更新状态?