Javascript 使用setState对错误作出反应
尝试在单个组件上使用setState时,我遇到以下错误 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性Javascript 使用setState对错误作出反应,javascript,reactjs,Javascript,Reactjs,尝试在单个组件上使用setState时,我遇到以下错误 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性 我在该州创建了该列表 在一个按钮上,我想更新列表 我的代码: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props) { super(pro
- 我在该州创建了该列表
- 在一个按钮上,我想更新列表
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;
键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键,以使元素具有稳定的标识
使用map()
函数时,必须向渲染组件添加key
属性
<ul>
{this.state.sistemas.map(sistema => <li key={sistema.id}>{sistema}</li>)}
</ul>
{this.state.sistemas.map(sistema=>- {sistema}
)}
使用箭头功能设置状态,然后根据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;
import React,{Component}来自'React';
类应用程序扩展组件{
建造师(道具){
超级(道具)
this.state={sistemas:[]};
this.handleClick=this.handleClick.bind(this)
}
handleClick=()=>{
console.log(“印度巴士护墙板”);
这是我的国家({
系统:[
{id:'1',nome:'sistema1'},
{id:'2',nome:'sistema2'},
{id:'3',nome:'sistema3'}
]
})
}
render(){
console.log(this.state.sistemas,'check this')
返回(
点击我
{this.state.sistemas.map(sistema=>
- {sistema.nome}
)}
);
}
}
导出默认应用程序;
但是如果您有一些唯一的id而不是索引,那么最好使用它作为键。