#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня есть родительский компонент A, который вычисляет некоторое начальное значение для своего дочернего компонента B. На самом деле я вычисляю начальное значение в componentDidMount() компонента A и передаю его в B через props:
<ComponentB initialValue={this.state.value} handleChange={this.handleChange}/>
И в компоненте B я делаю
this.state = {value: this.props.initialValue}
После этого компонент B должен самостоятельно управлять своим состоянием. Но каждый раз, когда это изменение значения, я хочу, чтобы оно обновляло состояние A, но с меньшим количеством информации.
В компоненте B:
const onChange = (event) => {
this.setState({value: event.target.value "only in B"});
this.props.handleChange(this.state.value);
}
В ComponentA:
const handleChange = (value) => {
this.setState({value: value});
}
Проблема в том, что A всегда имеет последнее слово, а значение в B не сохраняет суффикс «только в b». A сбрасывает значение состояния B на его внутреннее значение состояния с помощью реквизита initialValue при повторном отображении.
Итак, по сути, то, что я хочу сделать, это наследовать начальное значение от A при первом рендеринге, а затем обновлять состояние, когда в B происходит изменение, не стирая состояние B.
Комментарии:
1. Это не совсем ответ на ваш вопрос, но я хотел сказать, что то, что вы пытаетесь сделать, противоречит естественному способу передачи данных в React, поэтому вы боретесь. Вообще говоря, родительский компонент всегда должен передавать самую последнюю и актуальную информацию своим дочерним элементам, а также обрабатывать управление этими данными. Если это данные, которые родитель никоим образом не использует и которые чрезвычайно локализованы для дочернего элемента, то данные никогда не должны передаваться, они должны исходить из дочернего элемента как состояния.
2. Что касается самого вашего вопроса, любое изменение в родительском элементе приведет к повторному переходу дочернего элемента, это перезапишет текущее состояние дочернего элемента реквизитами, которые теперь были изменены. Единственный способ обойти эту проблему — изменить свой подход одним из способов, которые я перечислил выше, вероятно, переместив источник данных на дочерний элемент.
3. @Reifocs: В вашем коде нет ничего явно неправильного. Может быть полезно опубликовать полный пример как родительского, так и дочернего компонентов, чтобы увидеть, происходит ли что-то еще. Возможно, вы по какой-то причине повторно монтируете дочерний элемент, что приведет к сбросу состояния.
Ответ №1:
Эй, даже если вы можете сделать это лучше, если я правильно понял, я думаю, вы можете достичь того, чего хотите, просто используя:
this.props.value
на компоненте B:
<input defaultValue={this.props.value} onChange={this.onChange}/>
а затем, когда вы обрабатываете обновление, просто передайте event.target.value его родительскому элементу (компоненту).
Я не уверен на 100%, что это то, о чем вы спрашиваете, но вот пример:
Ответ №2:
Любое изменение в родительском компоненте вызовет повторную визуализацию дочернего компонента. Я считаю, что лучший подход к вашей ситуации — после наследования начального значения от A установить некоторую локальную переменную состояния для компонента B, чтобы управлять этим состоянием специально, чтобы оно было отдельно от A.