为数组儿童创建独特的关键道具（React.js）

Question

我试图在React中构建一个组件，它从JSON源获取信息，并使用其中的一些信息创建可以传递到其他单独组件的状态。虽然我还没有将状态传递到单独的组件中，但我已经能够使用JSON中的信息更新状态。然而，当我加载我的页面时，我会得到一个错误代码，我想在继续我的项目之前对其进行整理，以防在代码中留下错误会产生意外的副作用。错误代码如下所示：

js:1警告：列表中的每个子级都应该有一个唯一的“key”属性。

检查FetchData

在div（在FetchData.js:27）

在FetchData（在App.js： 8）

在div（在App.js： 7）

我的pp.js如下所示：

import React from 'react';
import './App.css';
import FetchData from './Components/FetchData/FetchData';

function App() {
  return (
    <div className="App">
      <FetchData/>
    </div>
  );
}
export default App;

我的FetchData.js如下所示：

import React from 'react';

class FetchData extends React.Component {
    constructor() {
        super();
        this.state = {
            portrait: null,
            title: null
        };
    }

    componentDidMount() {
        fetch('https://randomuser.me/api')
        .then (response => {
            return response.json();
        })
        .then (data => { 
            let userImage = data.results.map((person) => {
                return (
                    <div>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })
            let userTitle = data.results.map((person) => {                                  //line 27
                return (
                    <div key={person.results}>
                        <div> {person.name.title} </div>
                    </div>
                )
            })
            
            this.setState ({ 
                portrait: userImage,
                title: userTitle
             })
             console.log(this.portrait, this.title)
        })
    }
    
    render() {
        return (
            <div className='box1'>
                <div className='box2'>
                    <h2>{this.state.title}</h2>
                    {this.state.portrait}
                </div>
            </div>
        )
    }
};

export default FetchData;

以防万一，因为我的index.js看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

我认为问题在于我在“data.results.map”和“data.results.map”中都使用了“person”，所以我尝试更改命名，但也没有成功。任何帮助都将不胜感激！

Answer 1

在您的data.results.map（（人））函数中，您需要添加idx prop，因此您的代码应该如下所示：

let userImage = data.results.map((person,idx) => {
                return (
                    <div key={idx}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })

Answer 2

使用索引作为键是React中的一种反模式。

切勿将索引用作React中的键，除非：

• 列表和项目是静态的–它们不会计算且不会更改
• 列表中的项目没有ID
• 列表从不重新排序或过滤

当满足所有条件时，您可以安全地将索引用作键。

如果没有，请使用唯一ID。

它可能来自要显示的元素，

或者，您可以向模型添加新的ID属性，或者对内容的某些部分进行散列以生成密钥。这把钥匙只需要在它的兄弟姐妹中是唯一的，而不是全球唯一的。

在React Docs中阅读更多信息

Answer 3

错误是指FetchData组件。

如果为返回的DOM对象分配唯一的密钥，React中的协调算法可以工作。在本例中，您将从map函数返回一个类似DOM对象的列表。任何返回的块都必须在父节点上声明key属性。

就你而言：

componentDidMount() {
        fetch('https://randomuser.me/api')
        .then (response => {
            return response.json();
        })
        .then (data => { 
            let userImage = data.results.map((person) => {
                return (
                    <div key={person.id}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })
            let userTitle = data.results.map((person) => {                                  //line 27
                return (
                    <div key={person.id}>
                        <div> {person.name.title} </div>
                    </div>
                )
            })
            
            this.setState ({ 
                portrait: userImage,
                title: userTitle
             })
             console.log(this.portrait, this.title)
        })
    }

键值必须是唯一的字符串，React使用它在状态更改时更新正确的DOM节点。（我不知道你的person.results是如何填写的，但你需要一种身份证）

对于简单组件，也可以使用此语法

            let userImage = data.results.map((person,idx) => {
                return (
                    <div key={idx}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })

请注意使用这种语法，因为idx是包含数组中当前元素的位置，如果多次使用，它会导致重复的键（并且React会认为具有相同键的节点是相同的节点）