更改过滤器时使用错误的道具反应组件渲染答案

【问题标题】：React components rendering with wrong props when changing filter更改过滤器时使用错误的道具反应组件渲染
【发布时间】：2021-03-27 06:43:21
【问题描述】：

我在 react 应用中有一个页面，它使用单选表单来过滤传递给页面的不同数据对象。

我遇到的问题是，当我更改过滤器时（单击单选表单上的不同选项），结果列表中只有部分数据发生了变化。一个简单的例子如下：

选项一被所有旧数据选中

选择了选项二，但只有部分新数据通过

首先，我使用 axios 请求来获取将用于数据的对象数组：

componentDidMount() {
        axios.get("xxxxxxxxx")
            .then(result => {
                this.setState({
                    data: result.data
                });
            });

然后，我创建一个数组，该数组根据表单中选择的单选选项按属性过滤来自 axios 的数据：

let filteredData = [];

filteredData = this.state.data.filter(thisData => thisData.attribute === "attribute1");

最后，我将所有过滤后的数据映射到渲染函数中：

filteredData.map(filteredItem => ( <MyComponent key={i++} itemInfo={filteredItem.info} /> ))

在 MyComponent 的定义中，我使用 props 来访问过滤后的 item 的信息并将其放入 table 中，如下所示：

<td>{this.props.itemInfo.thisDataPoint}</td>

我很想知道是否有人知道为什么在过滤器更改时一些组件数据会更新，但不是全部。对我来说，有些数据发生变化但有些没有变化，这似乎很奇怪。

我已尝试将道具转换为状态，以便组件在更改时重新渲染，但这不起作用。

再次感谢我得到的任何帮助:)

【问题讨论】：

如果你使用console.log(filteredData)，你会看到改变选中单选按钮的预期数据值吗？
@buzatto 是的，console.log-ing 正在检索的数据和 console.log-ing-filteredData 显示正确的数据。严格来说，似乎是 ui 元素没有改变，即使下面的值应该是正确的。

标签： javascript html reactjs jsx

【解决方案1】：

鉴于filteredData 是正确的，并且根据您的代码，问题必须在key={i++} 上。使用某种实现索引通常会导致渲染问题，React 使用 key 来跟踪组件，因此很难区分组件。

您应该为每个组件提供一些唯一标识符作为键，例如key={filteredItem.id}。如果没有，可以使用 uuid 之类的库生成它。

【讨论】：

成功了！非常感谢。您的解决方案有意义且有效:)