React 列表数组内容更新，但列表不更新，如何解决，问题所在

问题描述

在写一个 ReactNative 项目的时候，列表渲染一个对象数组，数组结构如下

const [projList, setProjList] = useState(
    [
        {
            title: '嵌入式em1000 演示项目 - full',
            ip: '121.36.2.95/em1000/full/#/'
        },
        {
            title: '嵌入式em1000 演示项目 - mini',
            ip: '121.36.2.95/em1000/mini/#/'
        },
    ]
)

但在每次添加、删除、编辑之后，列表都没有更新，但实际数组数据其实已经更新了。

我的列表是这样渲染的：

projList.map((proj, index) => {
     return <ProjectItem key={index}
                         index={index}
                         onPress={() => {
                             navigation.navigate('DetailWebView', { href: proj.ip })
                         }
                         }
                         proj={proj}
                         onDelete={() => {
                             deleteProj(index)
                         }}
                         onEdit={() => {
                             editProj(index)
                         }}
     />
 })

我已经把列表数据更新为了 ：

[
  {
    "ip": "4",
    "title": "4"
  },
  {
    "ip": "121.36.2.95/em1000/full/#/",
    "title": "嵌入式em1000 演示项目 - full"
  },
  {
    "ip": "121.36.2.95/em1000/mini/#/",
    "title": "嵌入式em1000 演示 项目 - mini"
  }
]

但列表并没有更新

React 列表数组内容更新，但列表不更新，如何解决，问题所在_数组

原因

更新数据之后，列表元素未更新的根本原因是，React 的渲染是基于列表元素的 ​​key​​​ 的，如果 ​​Key​​ 没有变化，列表就不会更新。

解决办法

将 ​​key​​​ 改为列表数据中唯一的字段即可，比如这个例子里可以是 ​​proj.ip​​

<ProjectItem key={proj.ip} proj={proj}/>

结果

这样就解决了

[
  {
    "ip": "kylebing.cn",
    "title": "kylebing"
  },
  {
    "ip": "121.36.2.95/em1000/full/#/",
    "title": "嵌入式em1000 演示项目 - full"
  },
  {
    "ip": "121.36.2.95/em1000/mini/#/",
    "title": " 嵌入式em1000 演示项目 - mini"
  }
]

React 列表数组内容更新，但列表不更新，如何解决，问题所在_react native_02