在使用 get 请求更改父状态后重新渲染子级答案

【问题标题】：Re-render child after parent state change with get request在使用 get 请求更改父状态后重新渲染子级
【发布时间】：2021-03-19 00:47:57
【问题描述】：

所以我是 react 的初学者，我想知道如何在父级（来自子级）中设置状态后重新渲染子级。这是一个代码示例。我有一个使用 Axios 调用 GET 请求的函数，理想情况下，当我按下子组件中的按钮时，它将更新父组件中的状态并重新渲染子组件，但它只执行前者。

家长：

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    fetchData = () => {
       axios
            .get(url)
            .then(res => this.setState({data: res.data}))
    }


    Render() {
        return (<Child data={this.state.data} fetchData={this.fecthData}/>)
    }

    // ...

孩子：

class Child extends Component {
    // ...

    render() {
        const { data, fetchData } = this.props
        // render data
        return <button onClick={fetchData}>Change data then fetch</button>
    }
}

另外，你应该在 Child 中创建一个本地状态并将其设置为 Parent 状态的副本，或者只是将其作为道具传递下去可以吗？

【问题讨论】：

我认为您需要将方法绑定到类。在父类的构造函数中，可以这样做：this.fecthData = this.fecthData.bind(this)
您缺少将数据作为道具传递<Child fetchData={this.fecthData} data={this.state.data}/>
@Yadab 感谢您的指出。这是我的一个错误，但这不是我的问题。
我完全不明白你想在这里实现什么。
如果您使用codesandbox.io共享整个代码可能会更好，这样我们就可以找出代码有什么问题

标签： javascript reactjs

【解决方案1】：

您的父组件保存数据，子组件使用它。在我看来，您的做法是正确的。这是一个完整的工作示例： Codesandbox

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
    this.updateData = this.updateData.bind(this);
  }

  async fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    return response.json();
  }

  updateData() {
    this.setState({ data: [] }) // Creates a flicker, just so you see it does refresh the child
    this.fetchData().then((res) => this.setState({ data: res }));
  }

  render() {
    return <Child data={this.state.data} onAction={this.updateData} />;
  }
}

请注意，我将您的子道具 fetchData 重命名为 onAction（我不知道触发刷新的操作的名称是什么，可能是 onRefresh）。 数据属性和事件属性之间的组件属性总是最好的。

即使是标准组件也有这种方式：<input value={user.firstname} onChange={doSomething} />。所以，最好在事件前面加上on，然后父母决定如何处理它。这不是孩子的问题。

class Child extends Component {
  render() {
    const { data, onAction } = this.props;

    return (
      <>
        <button onClick={onAction}>Change data then fetch</button>
        {data.map((item) => (
          <div key={item.id}>
            {item.id} - {item.title}
          </div>
        ))}
      </>
    );
  }
}

【讨论】：