Question

所以我最近已经阅读了很多有关反应状态和道具的文章。我的应用程序没有那么大，但是现在我遇到了一个似乎很多人都感到很共同的问题，并且我正在尝试找到实现此问题的最佳方法。

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

当填充结果数组（在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}，用户可以没有看到新值，因为我无法编辑道具。

因此，有一种方法可以在每次父状态更改时从孩子的props渲染状态。还是有办法（1）在用户编辑联系人时保存状态，以及（2）显示他已编写的新值？

处理.map（）时，让每个孩子有一个状态的最佳方法是什么，当父状态更改并以新状态渲染所有孩子时，每个孩子都可以重新渲染。

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

Answer 1

我不确定是否了解所有内容，但是如果我知道您要做什么：

一个简单的解决方案可能是在onChange上调度一个动作
抓住这个动作的减速器将更新您的redux商店
道具会改变，景色也会改变。

但这将使您分派大量动作... 其他选择：

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

让我知道是否足够清楚

对从父母到孩子道具的良好做法做出反应

1 个答案: