原因如下：
在reactJS项目中工作，我知道我们不会改变状态(通常我不会，但不知道确切的原因(，所以我只是尝试了一些错误的方法，即使它工作正常。
import logo from './logo.svg';
import './App.css';
import Test from './test';
import {Home, NotFoundComponent,Contact, Profile} from './test/home'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
import React, {Component} from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [42, 33, 68],
};
}
onUpdateItem = i => {
this.state.list[i]++;
this.setState({
list: this.state.list,
})
// this.setState(state => {
// const list = state.list.map((item, j) => {
// if (j === i) {
// return item + 1;
// } else {
// return item;
// }
// });
// return {
// list,
// };
// });
};
render() {
return (
<div>
<ul>
{this.state.list.map((item, index) => (
<li key={item}>
The person is {item} years old.
<button
type="button"
onClick={() => this.onUpdateItem(index)}
>
Make me one year older
</button>
</li>
))}
</ul>
</div>
);
}
}
export default App;this.state.list[i]++;
this.setState({
list: this.state.list,
})
当我更新上面的代码而不是map方法时，有什么问题，两者都给出了正确的输出？
在幕后向我解释代码沙箱链接
当你改变一个数组时，比如list[i]++，数组的标识不会改变，所以listBefore ==== listAfter，当你在数组listBefore !== listAfter上映射时，当你调用setState时，默认情况下，即使你在setState中什么都没放，所有的子组件都会被再次调用。因为默认情况下react无法判断是否需要子级更新，这实际上是浪费资源。
你可以通过告诉孩子们"；不更新"；通过调用CCD_ 6或简单地使用CCD_。
判断是否需要更新的方法是使用===进行比较
此外，即使你不在乎表现。你永远不应该这样做。在某些情况下，它会导致一些可调试的错误，主要是因为react中的更新未同步。我从来没有遇到过，因为我甚至不敢尝试
更新state时，应注意immutable。
onUpdateItem = i => {
//this.state.list[i]++;
//this.setState({
// list: this.state.list,
//})
this.setState({
list: this.state.list.map((value,index)=>{
if(i === index) return value+1;
return value;
})
});
}
如果你不保持不变，你的应用程序将无法按你的预期工作。
React状态在生命周期之后更新。如果没有不变性，就意味着你正在打破生命周期。