javascript - 将良好实践从父状态反应到子道具

问题描述

所以我最近读了很多关于反应状态和道具的文章。我的应用程序并没有那么大，但现在我面临一个似乎对很多人来说都很常见的问题，我正在努力寻找实现这一点的最佳方法。

我的应用程序很简单。顶部的搜索栏，显示联系人列表。我的搜索栏是一个组件，正在使用 searchBar 值的结果更新 react-redux 存储（使用 axios 调用后端）。直到这里一切都很好。

当结果数组被填充（在 redux 存储中）时，我的容器会重新呈现结果数组。像这样：

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> 
}

我在 React 网站上发现，在孩子状态下从父母那里复制道具并不是一个好主意。就我而言，我已经看到了，因为如果我这样做

...
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() 以使每个子节点具有一个状态时，最好的方法是什么，当父状态更改并以新状态渲染所有子节点时，该子节点可以重新渲染。

谢谢您的帮助。如果您需要更高的精度，请不要犹豫。

标签： javascriptreactjsreact-redux

javascript - 将良好实践从父状态反应到子道具

问题描述

解决方案

推荐阅读