Javascript 状态更改后React组件不更新

我有一个问题，当我的状态在makeNewSmallThings中更改时，我的渲染方法不会更新组件，您能帮我吗？我将展示的代码主要展示重要的部分 守则：

constructor(props){
    super(props)
    this.smallElements = {}
    this.handleConsume = this.handleConsume.bind(this)
    this.makeNewSmallThings = this.makeNewSmallThings.bind(this)
    this.onSmallThingSpawn = this.onSmallThingSpawn.bind(this)
    let arrayOfSmallThings = this.getInitialiceArray()
    let arrayOfObjects = this.getSmallItems(arrayOfSmallThings)
    this.state = {smallThings: arrayOfSmallThings, objects: arrayOfObjects}
    this.makeNewSmallThings()

    console.log(arrayOfSmallThings)
}
makeNewSmallThings(){
    let arrayOfSmallThings = this.state.smallThings
    let arrayOfObjects = this.state.objects
    let newId = arrayOfSmallThings[arrayOfSmallThings.length - 1] + 1
    let newObject = this.createSmallThing(newId,newId)
    arrayOfSmallThings.push(newId)
    arrayOfObjects.push(newObject)
    this.setState({smallThings: arrayOfSmallThings, objects: arrayOfObjects})
    console.log(this.state.objects)
    setTimeout(this.makeNewSmallThings, 1000)
}
render(){
    return (
        <div className="Game">
            <Player />
            {this.state.objects}
        </div>
    )
}

构造函数（道具）{
超级（道具）
this.smallElements={}
this.handleConsume=this.handleConsume.bind（this）
this.makeNewSmallThings=this.makeNewSmallThings.bind（this）
this.onSmallThingSpawn=this.onSmallThingSpawn.bind（this）
让arrayOfSmallThings=this.getInitialiceArray（）
让arrayOfObjects=this.getSmallItems（arrayOfSmallThings）
this.state={smallThings:arrayOfSmallThings，objects:arrayOfObjects}
this.makeNewSmallThings（）
console.log（arrayOfSmallThings）
}
makeNewSmallThings（）{
让arrayOfSmallThings=this.state.smallThings
让arrayOfObjects=this.state.objects
设newId=arrayOfSmallThings[arrayOfSmallThings.length-1]+1
让newObject=this.createSmallThing（newId，newId）
arrayOfSmallThings.push（newId）
arrayOfObjects.push（新对象）
this.setState（{smallThings:arrayOfSmallThings，objects:arrayOfObjects}）
console.log（this.state.objects）
setTimeout（this.makeNewSmallThings，1000）
}
render（）{
返回(
{this.state.objects}
)
}

您未正确使用

设置状态。您直接更改状态，然后使用
setState
将状态中的数组设置为它们已有的值

要解决此问题，请在更改阵列之前制作阵列的副本，更改副本，然后通过将更改的副本传递到
setState
来更改状态

冒犯的台词

let arrayOfSmallThings = this.state.smallThings
let arrayOfObjects = this.state.objects

应改为

let arrayOfSmallThings = [...this.state.smallThings]
let arrayOfObjects = [...this.state.objects]

例子
要运行此示例

使用创建反应应用程序创建反应应用程序
更改
App.js
和
index.js
以匹配以下代码
npm启动
App.js

import React, { Component } from 'react';

class Player extends Component {
    render() {
        return (
            <p>Player</p>
        )
    }
}

class App extends Component {
    constructor(props){
        super(props)
        this.smallElements = {}
        this.handleConsume = this.handleConsume.bind(this)
        this.makeNewSmallThings = this.makeNewSmallThings.bind(this)
        this.onSmallThingSpawn = this.onSmallThingSpawn.bind(this)
        let arrayOfSmallThings = this.getInitialiceArray()
        let arrayOfObjects = this.getSmallItems(arrayOfSmallThings)
        this.state = {smallThings: arrayOfSmallThings, objects: arrayOfObjects}
        this.makeNewSmallThings()

        console.log(arrayOfSmallThings)
    }

    handleConsume() {
        console.log('handleConsume')
    }
    onSmallThingSpawn = e => {
        console.log(e)
    }
    getInitialiceArray() {
        return [0]
    }
    getSmallItems(array) {
        return array.map(item => (<span key={item}> {item} </span>))
    }

    makeNewSmallThings(){
        let arrayOfSmallThings = this.state.smallThings // Change me to [...this.state.smallThings]
        let arrayOfObjects = this.state.objects // Change me to [...this.state.objects]
        let newId = arrayOfSmallThings[arrayOfSmallThings.length - 1] + 1
        let newObject = this.createSmallThing(newId,newId)
        arrayOfSmallThings.push(newId)
        arrayOfObjects.push(newObject)
        this.setState({smallThings: arrayOfSmallThings, objects: arrayOfObjects})
        console.log(this.state.objects)
        setTimeout(this.makeNewSmallThings, 1000)
    }

    createSmallThing(id, id2) {
        return (
            <span key={id}> {id2} </span>
        )
    }

    render(){
        return (
            <div className="Game">
                <Player />
                {this.state.objects}
            </div>
        )
    }
}

export default App

import React，{Component}来自'React'；
类播放器扩展组件{
render（）{
返回(
玩家

)
}
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.smallElements={}
this.handleConsume=this.handleConsume.bind（this）
this.makeNewSmallThings=this.makeNewSmallThings.bind（this）
this.onSmallThingSpawn=this.onSmallThingSpawn.bind（this）
让arrayOfSmallThings=this.getInitialiceArray（）
让arrayOfObjects=this.getSmallItems（arrayOfSmallThings）
this.state={smallThings:arrayOfSmallThings，objects:arrayOfObjects}
this.makeNewSmallThings（）
console.log（arrayOfSmallThings）
}
handleConsume（）{
console.log（'handleConsume'）
}
onSmallThingSpawn=e=>{
控制台日志（e）
}
getInitialiceArray（）{
返回[0]
}
getSmallItems（数组）{
返回array.map（item=>（{item}））
}
makeNewSmallThings（）{
让arrayOfSmallThings=this.state.smallThings//将我更改为[…this.state.smallThings]
让arrayOfObjects=this.state.objects//将我更改为[…this.state.objects]
设newId=arrayOfSmallThings[arrayOfSmallThings.length-1]+1
让newObject=this.createSmallThing（newId，newId）
arrayOfSmallThings.push（newId）
arrayOfObjects.push（新对象）
this.setState（{smallThings:arrayOfSmallThings，objects:arrayOfObjects}）
console.log（this.state.objects）
setTimeout（this.makeNewSmallThings，1000）
}
createSmallThing（id，id2）{
返回(
{id2}
)
}
render（）{
返回(
{this.state.objects}
)
}
}
导出默认应用程序

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

从“React”导入React
从“react dom”导入react dom
从“./App”导入应用程序
ReactDOM.render（，document.getElementById（'root'））

在
App.js
中更改带有注释的行，并查看应用程序从非功能变为功能。
能否显示makeNewSmallThings功能？当然，很抱歉，我粘贴错误：D@BradEvans这很有帮助，谢谢you@AlexejFröbel，你在做一件非常危险的事。您正在使用当前解决方案直接改变状态。这是因为
让x=This.state.x
不创建本地副本，而是分配一个直接引用。这意味着，如果您随后执行
x=123
，则与执行
此.state.x=123
相同！！首先，创建一个本地副本。对于对象使用
Object.assign（{}，myVar）
，对于数组使用
myArr.slice（）
。或者，ES解决方案将是
让x={this.state}
，这也会创建一个副本。您是否正在使用
shouldComponentUpdate
react的生命周期执行任何操作？如果是，我也希望看到。