在React中有没有办法通过从另一个组件点击按钮来重新安装组件？

Question

点击按钮后，我将道具从父母传递给子组件。 然后，子组件应根据父组件传递的props进行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>