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

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

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

Answer 1

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

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