Reactjs 更改后的值不会显示在Dom中

我正在学习React，在我的测试应用程序中，我制作了两组相同的随机彩色数组，每次我点击“更改颜色”按钮时，这些数组都会洗牌并更改颜色。然而，我似乎无法使Dom更新我的数组颜色，即使颜色的值正确更改

import React from 'react';
class Card extends React.Component{
    constructor(props){
        super(props);
        const {r,g,b}=this.props.card
        this.state={
            style:{
                width:'100px',
                height:'100px',
                display:'inline-block',
                backgroundColor:`rgb(${r},${g},${b})`
            }
        }
    }
    onClick=()=>{
        const {r,g,b}=this.props.card
        console.log('color values of the card with index',this.props.id ,' is: ', r,g,b)
    }
    render(){
        const {style}=this.state
        return (
            <div style={style}>
                <button onClick={this.onClick}>card test</button>
            </div>
        )
    }
}
export default Card;

这就是我的问题所在

---

如图所示，每次单击时，值都会更改，但卡的颜色保持不变。但是，如果我将基于类的组件更改为非基于类的组件，并在render而不是constructor中设置样式，那么它将起作用，但我希望有一个类组件，以便我可以将我单击的卡传递给父组件。

onClick是否也会触发其他事件？否则，不要看到什么会改变卡的值，因为onClick只是记录

假设卡片道具以某种方式正确更改，我相信您的问题是您的卡片道具正在更新，但状态在构造函数中设置，并且从未更新

而不是在状态中设置样式值，我只会更改为在渲染中计算样式

render() {
  const {r,g,b} = this.props.card
  const style = {
    width: '100px',
    height: '100px',
    display: 'inline-block',
    backgroundColor: `rgb(${r},${g},${b})`
  }

  return (
    <div style={style}>
      <button onClick={this.onClick}>card test</button>
    </div>
  )
}

---

通常情况下，您不知道如何保持容易从道具中派生出来的状态，以避免出现这种情况。

onClick是否也会触发其他事件？否则，不要看到什么会改变卡的值，因为onClick只是记录

假设卡片道具以某种方式正确更改，我相信您的问题是您的卡片道具正在更新，但状态在构造函数中设置，并且从未更新

而不是在状态中设置样式值，我只会更改为在渲染中计算样式

render() {
  const {r,g,b} = this.props.card
  const style = {
    width: '100px',
    height: '100px',
    display: 'inline-block',
    backgroundColor: `rgb(${r},${g},${b})`
  }

  return (
    <div style={style}>
      <button onClick={this.onClick}>card test</button>
    </div>
  )
}

---

您通常不知道如何保持从道具中轻松派生的状态，以避免出现这种情况。

您的onClick处理程序本质上是一个no-opt。您的onClick处理程序本质上是一个no-opt“更改颜色”按钮的onClick将更改颜色的值，我只是使用卡片组件上的按钮来测试值是否正确更改，正如您所看到的，道具的值是否正确更改，@Nhat道具已更改，但您没有更改状态以反映新值！我试着像这样使用setState const{r，g，b}=this.props.card this.setState{backgroundColor:rgb${r}，${g}，${b}，但它不起作用。一定是我做了什么wrong@Nhat您是否正在实施componentWillReceiveProps来更新状态？单击“更改颜色”按钮将更改颜色的值，我只是使用卡组件上的按钮来测试值是否正确更改，正如您所看到的，道具的值是否正确更改，@一行道具已更改，但您不会更改状态以反映新的值！我试着像这样使用setState const{r，g，b}=this.props.card this.setState{backgroundColor:rgb${r}，${g}，${b}，但它不起作用。一定是我做了什么wrong@Nhat您是否正在实现componentWillReceiveProps以更新状态？