在父 state 使用获取请求更改后重新渲染子

Question

所以我是一个有反应的初学者，我想知道如何在父级（来自子级）中设置 state 后重新渲染子级。 这是一个代码示例。 我有一个 function 使用 Axios 调用 GET 请求，当我按下子组件中的按钮时，理想情况下它会更新 state 只在前一个子组件中，但它也重新生成。

家长：

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>
    }
}

另外，您是否应该在子级中创建本地 state 并将其设置为父级 state 的副本，或者只是将其作为道具传递可以吗？

Answer 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>
        ))}
      </>
    );
  }
}