0

这是我render的FormEl组件方法。

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

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

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

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

4

3 回答 3

1

直接使用 this.props.count 代替。

for (let i = 0; i < this.props.count; i++) {
于 2018-09-06T09:00:13.310 回答
0

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

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

于 2018-09-06T09:05:19.687 回答
0

构造函数只被调用一次，所以你只能在那里设置一个初始状态。

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

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

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

于 2018-09-06T09:08:15.480 回答