Question

单击按钮后，我正在将道具从父级传递到子级组件。然后，假定子组件根据父组件传递的道具进行API调用，但子组件仅渲染一次（安装时）。我在做什么错了？

Answer 1

您可以添加componentDidUpdate生命周期挂钩，并检查道具是否已更改，并以此方式创建另一个API调用，也可以按顺序在父组件的子组件上设置新的key道具卸载前一个并安装新的。

示例

class App extends React.Component {
  state = {
    childKey: Math.random()
  };

  onClick = () => {
    this.setState({ childKey: Math.random() });
  };

  render() {
    const { childKey } = this.state;

    return (
      <div>
        <button onClick={this.onClick}>Remount Child</button>
        <Child key={childKey} prop={childKey} />
      </div>
    );
  }
}

class Child extends React.Component {
  state = {
    isLoading: true,
    data: null
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ data: this.props.prop, isLoading: false });
    }, 1000);
  }

  render() {
    const { isLoading, data } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <div>{data}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

在React中，有一种方法可以通过单击另一个组件上的按钮来重新安装它？

1 个答案: