仅更新对象数组中的一个属性反应

Question

我的目标是显示 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>
    );
  }
}

Answer 1

尝试这个：

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

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

Answer 2

像这样的东西？

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

Answer 3

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

纠正我，如果有什么不对的话。 谢谢，Naveen.ND

Answer 4

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