仅更新对象数组中的一个属性会做出反应答案

【问题标题】：Updating only one property inside an array of objects react仅更新对象数组中的一个属性会做出反应
【发布时间】：2020-05-25 14:38:55
【问题描述】：

我的目标是显示 3 张卡片，其中的一些数字每秒都会更新。我有一组具有名称、数字和图标属性的对象。我不知道如何只更新数字，而不是其他属性。这是我的代码：


const initialStats = [
  { name: "Twitter", numbers: 10345, icon: "twitter" },
  { name: "Facebook", numbers: 8739, icon: "facebook f" },
  { name: "Google+", numbers: 2530, icon: "google plus g" }
];
export default class Social extends React.Component {
  state = {
    stats: initialStats
  };

  componentDidMount() {
    this.timer = setInterval(() => {

      this.setState(prevState => ({

        stats: [...prevState.stats]
      }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { stats, number } = this.state;

    return (
      <div className="social">
        <h3 className="social__title">Social</h3>

        <div className="social__data">
          {stats.map(stat => {
            return (
              <div key={stat.name} className="social__data__stats">
                <div className="social__data__stats--icon">
                  <Icon name={stat.icon} size="big" />
                </div>

                <div className="social__data__stats--content">
                  <h4 className="social__data__stats--content--name">
                    {stat.name}
                  </h4>
                  <p className="social__data__stats--content--numbers">
                    {stat.numbers}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

【问题讨论】：

标签： javascript arrays reactjs object

【解决方案1】：

componentDidMount() {
    this.timer = setInterval(() => {
        const stats = this.state.stats.map(item => {
            return { ...item, numbers: /* your number */ }
        })
        this.setState({ stats });
    }, 1000);
}

【讨论】：

考虑添加关于您的代码如何以及为何解决问题的说明。

【解决方案2】：

  componentDidMount() {
    this.timer = setInterval(() => {

    var stats = JSON.parse(JSON.stringify(this.state.stats)); // shallow copying the stats state variable
    stats = stats.map((value,index,arr)=>{
    value.numbers = 12; // Give any value you want ,i gave 12 for example
    })
      this.setState({stats});

    }, 1000);
  }

纠正我，如果有任何问题。谢谢，纳文.N.D

【讨论】：

【解决方案3】：

试试这个：

componentDidMount() {
  this.timer = setInterval(() => {
    this.setState(prevState => ({
      stats: prevState.stats.map(stat => ({...stat, numbers: Math.random() * 10000})
    }));
  }, 1000);
}

使用扩展运算符，您可以设置某些特定属性的值并复制其余部分。上面的 sn-p 会给你一个 0 - 10000 之间的随机数。

【讨论】：

【解决方案4】：

这样的？

 this.timer = setInterval(() => {

  this.setState(prevState => ({
    prevState.stats[0].numbers = 1000;
    prevState.stats[1].numbers = 2000;
    prevState.stats[2].numbers = 3000;
    stats: [...prevState.stats]
  }));
}, 1000);

【讨论】：