无法更新状态中的嵌套对象

Question

import React, { Component } from 'react';
import ColorBox from './ColorBox'
import './ColorBoxes.css'

class ColorBoxes extends Component {
    state = { 
        colors: {}
    }

    clickedColor = (color) => {
        let newColor = this.randomColorGenerator()
        if (color !== newColor) {
            console.log('i am changing state', newColor)
            console.log(color, 'i am current color')
            console.log(this.state.colors)

            const {colors} = this.state
            this.setState({
                colors: {
                    ...colors,
                    [color]: newColor
                }
            })
        }

    }

    randomColorGenerator = () => {
        let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16)
        return randomColor
    }

    renderColors = () => {
        let colors = []
        colors = Object.keys(this.state.colors)
        return colors.map(c => 
        <div key={c}><ColorBox color={c} clickedColor={this.clickedColor}/></div>)
    }

    componentDidMount() {
        let colorKey
        let colors = {}
        for(let i=0; i < 21; i++) {
            colorKey = this.randomColorGenerator()
            colors[colorKey] = colorKey

        }
        this.setState({ colors: colors  });
    }
    render() { 

        return ( 
            <div className="ColorBoxes">
                {this.renderColors()}
            </div>
        );
    }
}
export default ColorBoxes;

子组件

import React from 'react';
import './ColorBox.css'

const ColorBox = (props) => {
    return <div className='ColorBox' 
    style={{backgroundColor: `${props.color}`}}
    onClick={() => props.clickedColor(props.color)}>
        {props.color}
    </div>
}

export default ColorBox;

编辑，我已经尝试了提出的解决方案，但是状态已更新，基于 React 开发人员工具，但组件没有重新渲染。我怀疑密钥也必须更改以重新渲染，但我不知道如何在状态下执行此操作我想要做的是使用旧密钥并将其替换为正在更新的相同颜色。

我有这个颜色对象处于状态，它包含颜色的键：值对，例如颜色：{#fff: #fff, #bbb: #bbb}。我将一个函数向下传递给一个子组件，这样当我点击一种颜色时，它会 return 该颜色是我在状态对象中的键，然后我想找到该键并将该键值更新为将被选择的新随机颜色。我无法访问该密钥。我怎么做？理想情况下，我可能想删除该键并将键和值更新为在我的状态对象中相同。

Answer 1

你可以这样做：

class ColorBoxes extends Component {
    state = { 
        colors: {}
    }

    clickedColor = (color) => {
        let newColor = this.randomColorGenerator()
        if (color !== newColor) {
            console.log('i am changing state', newColor)
            console.log(color)
            console.log(this.state.colors.color)
            let newColors = {...this.state.colors};
            newColors.color = newColor;
            this.setState({ colors: newColors })
       }
    }

Answer 2

您缺少 color 的括号。您需要一个方括号来设置对象上的动态键：

this.setState(prevState => ({  
  ...prevState.colors,
  [color]: newColor,                    
}));

希望对您有所帮助！

Answer 3

假设你的状态是这样的：

colors: {
  #fff: '#fff',
  #000: '#000'
}

然后只需将您的 setState 更新为

const {colors} = this.state
setState({
  colors: {
    ...colors,
    [color]: newColor
  }
})

问题是您将新颜色状态附加到颜色对象之外

无法更新状态中的嵌套对象

Unable to update a nested object within state

javascript

state

object

reactjs

spread-syntax