狀態更改后，React Compoment不更新

Question

我有一個問題，當狀態在makeNewSmallThings中更改時，我的render方法不會更新組件，您能幫我嗎？ 我將要呈現的代碼主要是顯示重要部分的代碼：

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>
    )
}

Answer 1

您使用setState不正確。 您直接更改狀態，然后使用setState將狀態內部的數組設置為它們已經具有的值。

要解決此問題，請在更改數組之前對其進行復制，更改副本，然后通過將更改后的副本傳遞給setState來更改狀態。

令人反感的線

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

應該更改為

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

例

運行這個例子

1. 使用create-react-app創建一個React 應用 。
2. 更改App.js和index.js以匹配以下代碼。
3. npm start

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

index.js

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

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

更改App.js帶有注釋的行，並查看該應用程序從無法運行變為正常運行。