使用 setState 反应错误答案

【问题标题】：react err with use setState使用 setState 反应错误
【发布时间】：2018-04-08 22:08:40
【问题描述】：

尝试在单个组件上使用 setState 时出现以下错误。

警告：数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

我在该州创建了列表。
在我想更新列表的按钮上

我的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = { sistemas: [] };

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log('Indo buscar dados');
    this.setState({
      sistemas: [
        { id: '1', nome: 'sistema1' },
        { id: '2', nome: 'sistema2' },
        { id: '3', nome: 'sistema3' }
      ]
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <button className='button' onClick={this.handleClick}>
          Click Me
      </button>
        <p>{this.state.sistemas}</p>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <ul>
            {this.state.sistemas.map(sistema => <li>{sistema}</li>)}
          </ul>
        </div>
      </div>
    );
  }
}

export default App;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素赋予键，以使元素具有稳定的身份

https://reactjs.org/docs/lists-and-keys.html#keys

使用map()函数时，你必须为渲染组件添加key属性

<ul>
    {this.state.sistemas.map(sistema => <li key={sistema.id}>{sistema}</li>)}
</ul>

【讨论】：

但是如果你有它而不是索引，最好使用一些唯一的 id 作为键。

【解决方案2】：

使用箭头函数设置状态，然后通过 id 映射数据

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = { sistemas: [] };

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick = () => {
    console.log('Indo buscar dados');
    this.setState({
      sistemas: [
        { id: '1', nome: 'sistema1' },
        { id: '2', nome: 'sistema2' },
        { id: '3', nome: 'sistema3' }
      ]
    })
  }

  render() {
    console.log(this.state.sistemas, 'check this')
    return (
      <div className="App">

        <button className='button' onClick={this.handleClick}>
          Click Me
      </button>
        <div>
          <ul>
            {this.state.sistemas.map(sistema => 
              <li key={sistema.id}>{sistema.nome}</li>
            )}
          </ul>
        </div>
      </div>
    );
  }
}

export default App;

【讨论】：