React 不会在 props 更新时重新渲染

Question

这是 FormEl 组件的 render 方法。

return <div>
            <button type="button" onClick={this.clicked}>click to add 1 input</button>
            <Inputs count={this.state.childcount}/>
        </div>

在 clicked 方法中，我使用 setState

将 childcount 更新为 1

这是Inputsclass

class Inputs extends React.Component {
    constructor(props) {
        super(props);
        console.log("Input constructor is running.");
        this.state = {value: '', p: "p", count: props.count};
    }

    render() {
        let c = [];
        for (let i = 0; i < this.state.count; i++) {
            c.push(
                <div key={"id-" + (i * 10)}>
                    <input type="text" defaultValue={this.state.value}/>
                    <p> {this.state.p}</p>
                </div>);
        }
        return <div>
            {c}
        </div>;
    }
}

但是，当我更新 clicked 中的 childcount 时，我可以看到 FormEl 被重新渲染， <Inputs.. 中的 count 相应增加.但除了第一次（页面加载）时间外，它不会调用 Inputs 的 constructor。

Answer 1

直接用this.props.count代替。

for (let i = 0; i < this.props.count; i++) {

Answer 2

这里，Inputs组件的构造方法在挂载后只会被调用一次。它永远不会再被调用。因此，您可以做的是在 Inputs 组件中使用 componentDidUpdate 方法，并在传入的 count 道具与您当前的状态计数不同时设置状态。

否则，您可以按照

的建议直接在for中使用this.props.count

Answer 3

构造函数只能调用一次，因此您只能在那里设置初始状态。

事实上，由于您没有从输入 class 修改状态，所以您根本不需要任何状态。你可以声明 const value=""; const p="p";在你的渲染方法的顶部。只需使用 this.props.count 而不是 this.state.count

在这种情况下，您可以删除构造函数。

如果您稍后修改组件的行为并需要根据新道具（不是当前情况）设置状态，您可能需要检查 getDerivedStateFromProps 方法。

React 不会在 props 更新时重新渲染

react does not re render on props update

javascript

reactjs

react-props

react-state-management