子组件reactjs的动态道具

Question

我有一个父组件将状态作为道具传递给子组件。在父组件中使用 componentDidMount 在页面加载时调用 API，并且传递给子组件的数据的初始状态会发生变化。更改会反映在父组件中，但不会反映在子组件中。

这是我的代码的摘录：

loan.js（父）

<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed }/>

ForecloseBtn.js（儿童）

import React from 'react';
import { render } from 'react-dom';

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = {
            lead_id: this.props.id,
            isForeclosed: this.props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

export default ForecloseBtn;

所以在这里，lead_id 和 isForeclosed 的状态在父组件中发生了变化，但在子组件中没有发生变化。如何在子组件中也进行状态更新？

Answer 1

这就是为什么在你的子组件中你只在构造函数中准备好道具并相应地设置它的状态；如果它们稍后发生更改，则您不会更新子组件状态，因此不会重新渲染。

有几个选项可以解决这些问题，最简单的是不在子组件中使用状态，而是直接使用props；在这种情况下，一旦父组件更新，新的道具将触发子组件的重新渲染。这也是最干净的解决方案，您将只有一个事实来源，即从父组件传递到子组件的道具。

或者，您可以在子级中使用componentDidUpdate，并根据从父级收到的新道具更新其状态：

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.id !== prevProps.id) {
    this.setState({ lead_id: this.props.id });
  }
  if (this.props.foreclose !== prevProps.foreclose) {
    this.setState({ isForeclosed: this.props.foreclose });
  }
}

Answer 2

你必须在你的子组件中使用 componentDidUpdate 方法：

componentDidUpdate (prevProps) {
  if(prevProps.id !== this.props.id || prevProps.foreclose !== this.props.foreclose){
    this.setState({
      lead_id: this.props.id,
      isForeclosed: this.props.foreclose,
    })
  }
}

每次你的 state 或 props 改变时，这个方法都会被调用，并且我们只在 props 改变时重置lead_id 和 isForeClosed。

Answer 3

这里有两种可能的解决方案：

第一

您真的需要将您从父级以props 发送的state 存储为子级的state 吗？你为什么不像它们一样简单地使用它们props？您的孩子将在更改时重新渲染。

第二

如果您绝对必须将这些作为state 存储在孩子身上，您可以使用密钥prop 渲染孩子，只要您希望孩子完全重新安装，就必须更改该密钥，因为您需要一种方法来获取您的构造函数函数再次运行。

类似：

<ForecloseBtn 
  id={this.state.lead_id} 
  foreclose={this.state.isForeclosed }
  key={this.state.lead_id}
/>

不过，您应该阅读以下内容：

You probably don't need derived state...

Answer 4

class ForecloseBtn extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            lead_id: props.id,
            isForeclosed: props.foreclose,
        };
    }

    render() {

        return (
            ......
        )
    }
};

在子组件构造函数中props之前不需要this