Так что в последнее время я много читал о состоянии реакции и реквизите.Мое приложение было не таким уж большим, но сейчас я сталкиваюсь с проблемой, которая кажется общей для многих людей, и я пытаюсь найти лучший способ реализовать это.
Мое приложениепросто.Панель поиска сверху, отображающая список контактов.Моя панель поиска является компонентом и обновляет хранилище реагировать на результаты поиска значения searchBar (вызывая бэкэнд с axios).До этого момента все работает отлично.
Когда массив результатов заполнен (в хранилище избыточных данных), мой контейнер повторно отображает массив результатов.Например:
class Suggestions extends Component {
render() {
console.log('before map: ', this.props.contacts);
const {
contacts,
...rest
} = this.props;
const options = contacts.map((contact, index) => (
<Contact
key={contact.id}
renderToaster={renderToasterFunction}
contact={contact}
/>
));
return <div>{options}</div>;
}
}
const mapStateToProps = (state, props) => ({
contacts: state.contact.results,
});
export default connect(mapStateToProps)(Suggestions);
Проблема возникает в моем компоненте «Контакты». Мой список представляет собой список из 10 контактов, отображаемых на одной странице.Поэтому моя проблема заключается в том, что каждый компонент Контакт должен иметь свое собственное состояние (например, для добавления или редактирования информации: если вам нужно добавить новый номер телефона).
//contact component
state = {
contactState: ???
}
...
render(){
//exemple for simplicity
return <div>{this.state.contactState.name}</div>
}
Я основал на реагирующем веб-сайте, чтоЭто не очень хорошая идея, чтобы скопировать реквизит от родителя в состоянии ребенка.И в моем случае я видел это, потому что, если я делаю это
...
state = {
contactState: this.props.contact <--info from parent
}
первый поиск в порядке, но второй поиск с другой буквой, список результатов не обновляется, и я все еще вижу некоторые результаты первогопоиск.
, поэтому я попытался изменить свой компонент контакта на:
//contact component
state = {
contactState: ???
}
...
render(){
//exemple for simplicity
return <input value={this.props.contact.name} onChange={this.handleChange}/>
}
И это прекрасно работает с точки зрения визуального обновления, все мои контакты обновляются, даже если я это делаю3-4 поиска.Но моя проблема в том, что теперь, когда я хочу отредактировать имя, мне нужно где-то сохранить все мои contactState перед сохранением этой и второй проблемы, потому что мой компонент отображает {this.props.contact.name}, когда я редактирую это, пользователь можетя не вижу новое значение, потому что я не могу редактировать реквизиты.
Так есть ли способ визуализации состояния из реквизита в дочернем элементе каждый раз, когда изменяется родительское состояние.Или есть способ 1) сохранить состояние, когда пользователь редактирует контакт, и 2) отобразить новое записанное им значение?
Как лучше всего иметь дело с .map (), чтобы иметь одно состояниеОбучите детей, которые могут быть перерисованы при смене родительского состояния, и предоставит всем детям новое состояние.
Спасибо за вашу помощь.Не стесняйтесь, если вам нужно больше точности.