не реагирует на обновление реквизита

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

Здесь метод конструктора компонента Inputs будет вызываться только один раз после его монтирования. Это никогда не будет называться снова Итак, вы можете использовать метод componentDidUpdate в компоненте Inputs и setState, когда входящая count опора отличается от вашего текущего состояния.

Или же вы можете напрямую использовать this.props.count в for, как предложено @ lsa4299

Answer 2

Конструктор

должен вызываться только один раз, поэтому вы можете установить в нем только начальное состояние.

На самом деле, поскольку вы не изменяете состояние из класса Inputs, вам вообще не нужно никакого состояния. Вы можете объявить const value = ""; const p = "p"; на вершине вашего метода рендеринга. И просто используйте this.props.count вместо this.state.count

В этом случае вы можете удалить конструктор.

В случае, если вы позже измените поведение вашего Компонента и вам нужно будет установить состояние в зависимости от новых реквизитов (а не текущего случая), вы можете захотеть проверить метод getDerivedStateFromProps.

Answer 3

Вместо этого напрямую используйте this.props.count.

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