Как заставить дочерние компоненты перерисовывать?

Question

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

<QuestionContainer 
    error={() => this.state.currentError } 
/> 

Проблема заключается в том, что, когда я this.setState({ currentError: x }) в родительском ребенок не будет засавить, потому что проп ошибки фактически не изменился. Я пробовал this.forceUpdate безрезультатно.

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

Answer 1

<QuestionContainer 
    error={() => this.state.currentError } 
    ref="container" 
/> 

затем

this.refs.container.forceUpdate() 

Незнайка, если это лучший подход Тхо

Answer 2

Вы также можете иметь некоторые встречные переменные в состоянии родителя и увеличивать его каждый раз, когда вы setState так что если вы передаете его вплоть до ребенка он должен вызывать ребрендинг ребенка.

Answer 3

Непонятно, почему вы передаете функцию , которая возвращает значение из currentError, а не только само значение. Не могли бы вы передать это следующим образом:

<QuestionContainer error={this.state.currentError} />

А потом, в QuestionContainer «s визуализации, использовать его как, например,

render() { 
    return (
    <div>{this.props.error}</div> 
) 
} 

Если вы хотите, чтобы ваш пример работы вам нужно вызвать функцию в QuestionContainer:

render() { 
    return (
    <div>{this.props.error()}</div> 
) 
}