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

Question

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

我的应用很简单。顶部的搜索栏，显示联系人列表。我的搜索栏是一个组件，正在使用 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() 时，最好的方法是让每个子节点都有一个状态，当父状态更改时可以重新渲染并使用新状态渲染所有子节点。

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

Answer 1

我不确定是否了解所有内容，但如果我得到您想要做的事情：

• 一个简单的解决方案是在 onChange 上调度一个操作
• 捕捉动作的 reducer 将更新你的 redux 存储
• 道具会改变，视图也会改变。

但这会让你调度很多动作...... 其他选项：

• 在每个复制 props 的 Contact-Component 中使用状态
  state = {...this.props.contact}
• 修改更改处理程序的状态并将其也用作值。
• 保存并发送“最终名称”以更新 redux 存储并同时调用 api 以在您的服务器上更新

让我知道这是否足够清楚