Question

这是我的render组件的FormEl方法。

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

在clicked方法中，我使用childcount将setState更新为1

这是Inputs类

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>;
    }
}

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

Answer 1

直接使用this.props.count。

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

Answer 2

在这里，Inputs组件的构造函数方法在挂载后将仅被调用一次。再也不会调用它了。因此，当传入的Inputs道具与您当前的状态数不同时，您可以做的是在count组件和setState中使用componentDidUpdate方法。

否则，您可以按照@lsa4299的建议直接在this.props.count中使用for

Answer 3

构造函数只能被调用一次，因此您只能在其中设置一个初始状态。

实际上，由于您没有修改Inputs类的状态，因此根本不需要任何状态。您可以声明const value =“”; const p =“ p”;在您的render方法的顶部。只需使用this.props.count而不是this.state.count

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

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

反应不会在道具更新时重新呈现

3 个答案: