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并相应地设置其状态的原因；如果以后更改，则您不会更新子组件状态，因此不会进行任何重新渲染。

有几种方法可以解决问题，最简单的方法是不直接在子组件中使用状态，而直接使用sub rcx, (1<<31) - inner_count ; outer-- and re-create the inner loop counter jnc .outer；在这种情况下，一旦父组件更新，新的道具将触发子组件的重新渲染。这也是最干净的解决方案，您将只有一个事实来源，即从父级组件传递到子级组件的道具。

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

props

Answer 2

您必须在子组件Component中使用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,
    })
  }
}

每次状态或道具更改时，都会调用此方法，并且仅当道具更改时，我们才会重置lead_id和isForeClosed。

Answer 3

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

第一

您真的需要将要从父级发送的state作为props作为父项存储在孩子上吗？为什么不按原样使用它们简单的state？您的孩子在改变时会重新渲染。

第二

如果您绝对必须将它们作为props存储在子级上，则可以使用密钥state呈现给子级，只要您想完全重新安装子级，它就必须更改，因为您需要一种方法让您的构造函数再次运行。

类似的东西：

prop

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

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 (
            ......
        )
    }
};

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

子组件reactjs的动态道具

4 个答案: