我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：react教程，循环输出组件修改只读key的三种方案最佳实践 - 循环输出组件修改只读key
react教程，循环输出组件修改只读key的三种方案最佳实践（图4-1）

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

前文回顾

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

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

测试代码：

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;
JavaScript

苏南大叔：react教程，循环输出组件修改只读key的三种方案最佳实践 - 需要key
react教程，循环输出组件修改只读key的三种方案最佳实践（图4-2）

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

无效的解决方案

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

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

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

苏南大叔：react教程，循环输出组件修改只读key的三种方案最佳实践 - 修改key为目标
react教程，循环输出组件修改只读key的三种方案最佳实践（图4-3）

然而，这个key是只读的。

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

苏南大叔：react教程，循环输出组件修改只读key的三种方案最佳实践 - 修改key只读
react教程，循环输出组件修改只读key的三种方案最佳实践（图4-4）

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

方案一：三个点

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

方案二：object.assign 浅拷贝

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

方案三：extend 深拷贝

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

结束语

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

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   js    react