Question

有人可以告诉我从API中获取数据后如何更新表项吗？我检查了一下，发现数据正确到达了，没有任何问题，但是除了最后一行，我无法将它们反映在我的表上。我知道设计遵循的是非常糟糕的做法，我打算及时进行重构，但是目前，我只想学习如何更新表行。

    axios.put(url_const, this.state)
      .then(respond => {
        const a = res.data.a;
        this.state.d = a;
        this.state.a = a;
        this.state.t = a.toString();
      });
  }

Answer 1

您没有正确设置状态。在sendArr（）中，而不是将数组设置为

this.state.data = arr1;

像这样使用setState（）设置状态：

this.setState({
  data: arr1,
  arr: arr1,
  text: arr1.toString()

}）

状态更新后，组件将自动重新呈现其自身，从而向您显示更新的条目。

Answer 2

您不应在react中直接修改状态，而应使用this.setState更新新状态

 axios.put(API_URL + "/1", this.state)
      .then(res => {
        const arr1 = res.data.arr;
        this.setState({
           data: arr1,
           arr: arr1,
           text: arr1.toString()
        })
      });

此外，您还应该注意，这是一种使状态尽可能小的好习惯，您不需要数据，arr和text，您只需要（arr）一个变量，就可以从该变量中导出其他变量（来自州的arr）

从ReactJS中的API获取数据后如何重新呈现前端

2 个答案: