реагировать изменение состояния не повторяет клонированных детей

Question

У меня компонент с состоянием, форма. В конструкторе я создаю состояние, затем я повторяю компоненты дочерних элементов. Я клонирую целевых детей и добавляю реквизиты, используя

React.cloneElement(x, {data: modelProperty}); 

, где modelProperty - это объект с куском this.state на нем. Из-за клонирования я заканчиваю другим экземпляром this.props.children. Поэтому в рендере я делаю свою новую коллекцию детей, которые были украшены куском родителей this.state.

Я ожидаю, что он создаст привязку между состоянием и дочерними элементами, так что при изменении состояния дети, которые выполняются, будут повторно зарегистрированы. Однако, в то время как родительский компонент (форма) делает ререйдер, дети, которые выполняются изменением состояния, не повторно отображают.

Возможно, это немного сбивает с толку, поэтому я отправлю код.

constructor(props) { 
    super(props); 

    this.state = { 
    fields: props.fields, 
    formIsValid: true 
    }; 
    this.newChildren = decorateInputs(this.props.children, this.state.fields); 
} 

затем

const decorateInput = (children, fields) => { 
    return React.Children.map(children, x => { 
    if(!x.props){ return x; } 
    if (x.props.frfProperty) { 
     var field = fields.filter(f => f.name === x.props.frfProperty)[0]; 
     if (!field) { 
     throw new Error(`No property on model with name: ${x.frfProperty}!`) 
     } 
     return React.cloneElement(x, {data: field}); 
    } 

    var clonedItems = decorateInput(x.props.children, fields); 
    return React.cloneElement(x, {children: clonedItems}); 
    }) 
}; 

экспорта по умолчанию decorateInput;

затем

render() { 
    return (<form onSubmit={this.onSubmitHandler.bind(this)} > 
    {this.newChildren} 
    </form>) 
} 

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

Мой основной вопрос: почему поведение повторной визуализации ломается или нет у клонированных детей.

Наконец, я знаю, что есть другие шаблоны, которые будут работать. Мой вопрос касается механики делать это таким образом. то есть я знаю о redux, и я знаю, что у меня может быть собственная оболочка для детей, предоставляемых потребителю. Просто пытаюсь понять это.

Спасибо, R

Answer 1

Связывание вы упомянули не happned автомагически.
Я думаю, этого должно быть достаточно, чтобы позвонить по телефону в componentWillUpdate() callback , а также.

componentWillUpdate(nextProps, nextState){ 
this.newChildren = decorateInputs(nextProps.children, nextState.fields); 
} 

Подробнее о compontent lifecycle.