Javascript 无法获取ID'；用于键入的数组元素的s

根据React文档中的说明，可以通过

ID设置
数组
元素的
键
。
实际上，问题是，react根据指令在哪里获取ID数据（并且它不是元素的索引）：

从React doc：选择键的最佳方法是使用一个字符串，该字符串在其同级中唯一标识列表项。通常，您会使用数据中的ID作为密钥：

const todoItems=todos.map（（todo）=>

{todo.text}

);

但出于某种原因，它对我不起作用：

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
    const map = this.props.list.map(
      (li) => <li key={li.id}>{li}</li> // keys does an attached
    );
    return (
      <div>
        <ul>
          {map} 
        </ul>
      </div>
    )
  }
}

const testRenderer = ['1', '2', '3', '4', '5'];

ReactDOM.render(
  <MyComponent list={testRenderer} />,
  document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类MyComponent扩展了React.Component{
render（）{
const map=this.props.list.map(
（li）=>
{li}
//keys没有附加
);
返回(

{map}

)
}
}
const testRenderer=['1'，'2'，'3'，'4'，'5']；
ReactDOM.render(
,
document.getElementById（'root'）；
这里的问题是，您正在
testRenderer
中传递一个数字数组，但是map函数要求数组的每个项中都有一个
id
。试试这个

import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
  render() {
    const map = this.props.list.map(
      (li, index) => <li key={index.toString()}>{li}</li>
    );
    return (
      <div>
        <ul>
          {map} 
        </ul>
      </div>
    )
  }
}

const testRenderer = ['1', '2', '3', '4', '5'];

ReactDOM.render(
  <MyComponent list={testRenderer} />,
  document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类MyComponent扩展了React.Component{
render（）{
const map=this.props.list.map(
（li，index）=>
{li}
);
返回(

{map}

)
}
}
const testRenderer=['1'，'2'，'3'，'4'，'5']；
ReactDOM.render(
,
document.getElementById（'root'）；

现在，您使用
testRenderer
项作为
键
值。
问题是您正在使用
map（）
函数迭代数组，然后尝试调用循环中的对象

li.id
不存在，因为
li
不是对象。它是您正在迭代的数组中的一个值

可以像这样使用数组键值：

const map = this.props.list.map(
  (li, key) => <li key={key}>{li}</li> // where key will be 0, 1, 2, 3, 4
);

const map=this.props.list.map(
（li，key）=>
{li}
//其中key将是0、1、2、3、4
);
在
数组
中使用元素的
索引
不是创建
ID
的正确方法。与此相关，React也直接向我们提供了一个声明：

“作为最后一种手段，您可以在数组中以键的形式传递项目的索引。如果项目从未重新排序，这可能会很好，但重新排序会很慢。”

当索引用作键时，重新排序也会导致组件状态出现问题。组件实例会根据其键进行更新和重用。如果键是索引，则移动项会更改它。因此，受控输入等内容的组件状态可能会混淆，并以意外方式进行更新。”

您可以从高级官方指南中查看更多信息：

下面是两个例子，说明为什么在键部分中不使用键的索引非常重要

因此，如果我们想做得很好，我们需要为传入的
数组
创建一个
状态
更新方法，这将为传入的外部
数组
的每个
元素
创建一个唯一的
ID。通过这种方式，我们将对任何长度的传入
数组
进行完整计数，并且在对
数组
的元素重新排序的情况下，我们也不会按
ID
进行错误排序

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      arrayObj: {
          id: '',
          list: ''
      }
    }
  }

  componentWillMount() { // make new state with 
                         // object besides on incoming array
    let count = 0;
    let arrCount = [];
    let arrs = this.props.list;

    this.props.list.forEach( // make the ID for each element of an array
      (li) => {
        arrCount.push(++count); 
      } 
    );

    this.setState({
      arrayObj: {
          id: arrCount,
          list: arrs
        }
    })
  }

  render() {
    return (
      <ul>
        <MakeList obj={this.state.arrayObj} />
      </ul>
    )
  }
}

class MakeList extends React.Component{ // support component for 
                                    // render current obj state children
  render() {
    let object = this.props.obj;
    let arr = [];

    for (var key in object.list) {
      arr.push(<li key={object.id[key]}>{object.list[key]}</li>)
    }
    return arr;
  }
}

const testRenderer = ['11', '22', '33', '44', '55'];

ReactDOM.render(
  <MyComponent list={testRenderer} />,
  document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
arrayObj：{
id:“”，
列表：“”
}
}
}
componentWillMount（）{//使用
//传入数组上的对象
让计数=0；
让arrCount=[]；
设arrs=this.props.list；
this.props.list.forEach（//为数组的每个元素生成ID
（李）=>{
arrCount.push（++count）；
} 
);
这是我的国家({
arrayObj：{
id:arrCount，
名单：arrs
}
})
}
render（）{
返回(


)
}
}
类MakeList扩展了React.Component{//对组件的支持
//渲染当前obj状态子对象
render（）{
让object=this.props.obj；
设arr=[]；
for（object.list中的var键）{
arr.push（
{object.list[key]}
）
}
返回arr；
}
}
const testRenderer=['11'，'22'，'33'，'44'，'55']；
ReactDOM.render(
,
document.getElementById（'root'）；
ID这里指的是用来标识每个数据项的东西。不，它不是元素ID中的
索引。根据React docsMax，
键可以是任何唯一的值
index
只是一个可能的
键的例子。这样，如果数组元素重新排序（例如在筛选页面上），你可以使你的应用程序崩溃。你能进一步解释一下吗？你可以看到官方文档：reactjs.org/docs/reconction.html#在childrenYes上递归！这正是我想要的。谢谢你这么好的解释！这样，在数组元素重新排序的情况下（例如在过滤器页面上），您可以使应用程序崩溃。见官方文件：
import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      arrayObj: {
          id: '',
          list: ''
      }
    }
  }

  componentWillMount() { // make new state with 
                         // object besides on incoming array
    let count = 0;
    let arrCount = [];
    let arrs = this.props.list;

    this.props.list.forEach( // make the ID for each element of an array
      (li) => {
        arrCount.push(++count); 
      } 
    );

    this.setState({
      arrayObj: {
          id: arrCount,
          list: arrs
        }
    })
  }

  render() {
    return (
      <ul>
        <MakeList obj={this.state.arrayObj} />
      </ul>
    )
  }
}

class MakeList extends React.Component{ // support component for 
                                    // render current obj state children
  render() {
    let object = this.props.obj;
    let arr = [];

    for (var key in object.list) {
      arr.push(<li key={object.id[key]}>{object.list[key]}</li>)
    }
    return arr;
  }
}

const testRenderer = ['11', '22', '33', '44', '55'];

ReactDOM.render(
  <MyComponent list={testRenderer} />,
  document.getElementById('root'));