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

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

常量initialStats=[
{名称：“推特”，编号：10345，图标：“推特”}，
{姓名：“Facebook”，号码：8739，图标：“Facebook f”}，
{名称：“谷歌+”，编号：2530，图标：“谷歌+g”}
];
导出默认类Social.Component{
状态={
stats:initialStats
};
componentDidMount（）{
this.timer=setInterval（（）=>{
this.setState（prevState=>({
stats:[…prevState.stats]
}));
}, 1000);
}
组件将卸载（）{
clearInterval（这个计时器）；
}
render（）{
const{stats，number}=this.state；
返回(
社会的
{stats.map（stat=>{
返回(
{stat.name}

{stat.numbers}

);
})}
);
}
}

像这样的东西

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

试试这个：

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

使用“排列”操作符，可以设置某些特定特性的值并复制其余特性。上面的代码片段将给您一个0到10000之间的随机数

  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.N.D

考虑添加一个解释，说明您的代码如何以及为什么解决了这个问题。

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