react教程，循环输出组件修改只读key的三种方案最佳实践

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文中讲一个循环输出子组件过程中，试图修改read only的key的问题的解决方案。事先说明的是：对于组件循环输出来说，本文的方案并不是个好的解决方案。只是对于修改read only的key的问题，是个比较好的解决范例。

苏南大叔的程序如此灵动技术博客，记录苏南大叔的代码感悟感想。测试环境：win10，node@16.14.2，react@18.2.0，create-react-app@5.0.1。对于react循环输出子组件这件事情来说，本文的哪个方案都不是好的方案，请不要照搬。

前文回顾

在下面的文章的方案四中，苏南大叔提出了一个问题：

如何给被循环的子组件增加一个key，否则react在生产模式下，会一直有警告信息输出。但是，如果不解决这个问题的话，其实在成品模式下，也并没有相关的警告输出了，而且代码会正常被执行。所以忽略警告信息，也是没有任何问题的。

• https://newsn.net/say/react-map.html

测试代码：

import { useState } from "react";
const App = () => {
  const [on, setOn] = useState(false);
  const p = <p className={on ? "on" : "off"}>key不可变</p>;
  const lists = Array(3).fill(p);
  return (
    <div className="App">
      {lists}
    </div>
  );
}
export default App;

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

无效的解决方案

//...
    <div className="App">
      {lists.map((value, index) => {
          // console.log(value);
          value.key = index;
          return value;
      })}
    </div>
//...

通过输出子组件value，可以知道有个key可以修改，就是本文的目标问题的解决方案关键点。

{$$typeof: Symbol(react.element), type: 'p', key: null, ref: null, props: {…},?…}

然而，这个key是只读的。

Cannot assign to read only property 'key' of object '#<Object>'

解决方案就是，制造一个不是只读key的新对象来做一下替换。

方案一：三个点

//...
    <div className="App">
      {lists.map((value, index) => {
          let v = {...value};
          v.key = index;
          return v
      })}
    </div>
//...

• https://newsn.net/say/js-dot-dot-dot.html

方案二：object.assign 浅拷贝

//...
    <div className="App">
      {lists.map((value, index) => {
          return Object.assign({}, value, {key:index});
      })}
    </div>
//...

方案三：extend 深拷贝

npm i extend;

const extend = require("extend");
//...
    <div className="App">
      {lists.map((value, index) => {
          return extend(true, {}, value, {key:index});
      })}
    </div>
//...

• https://newsn.net/say/nodejs-extend-assign.html

结束语

既然本文主体是以react呈现的，那么就以react结尾吧。欢迎大家点击下面的react系列经验文章链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。