Обновление только одного свойства внутри массива объектов реагирует

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

Используя оператор распространения, вы можете установить значение некоторых определенных c свойств и скопировать остальные. Приведенный выше фрагмент даст вам случайное число от 0 до 10000.

Answer 2

componentDidMount() {
    this.timer = setInterval(() => {
        const stats = this.state.stats.map(item => {
            return { ...item, numbers: /* your number */ }
        })
        this.setState({ 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

как то так?

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