如何在 Reactjs 中使用 clickHandler 和 useState 更新对象数组

Question

如何在 Reactjs 中使用 clickHandler 和 useState 更新对象数组？

import React, { useState } from 'react';

    const TextVote = () => {
      const [votes, setVotes] = useState([
        { text: 'OneOneOne', vote: 0 },
        { text: 'TwoTwoTwo', vote: 5 },
        { text: 'ThreeThreeThree', vote: 0 }
      ]);
      const votesHandler = () => {
        const newClicks = {
          ...votes,
          vote: votes[1].vote + 1
        };
        setVotes(newClicks);
      };

      return (
        <div className='box'>
          <div>{votes[1].text}</div>

          <div>
            <button onClick={votesHandler}>vote</button>
            <div>{votes[1].vote}</div>
          </div>
        </div>
      );
    };

    export default TextVote;

想知道如何更新阵列以及点击更新后的一些反馈。现在它应该只更新一个对象，但事实并非如此。基本思路是对评论进行投票，return 得票最多的评论。这是一个模型，只是为了了解它是如何工作的。我无意渲染整个数组。只有得票最多的那个。

Answer 1

投票的初始值为数组。但是你把它当作对象。

const newClicks = {
          ...votes,
          vote: votes[1].vote + 1
        };

你应该这样做。

const newClicks = [...votes];
let newVote = { ...newClicks[1] };
newVote.vote++;
newClicks[1] = newVote;
setVotes(newClicks);

尽情享受吧！

Answer 2

这种方法怎么样？每个项目的初始 0 票数组存储在一个状态中，然后随着每次 "vote" 点击而递增并存储在该数组中，每次点击都会更新。此外，每次它都会显示一个随机项目。当然你可以改变数组的长度（项目数）。

const App = (props) => {
  const [selected, setSelected] = useState(0);
  const [points, setPoints] = useState(new Uint8Array(6));


const votesCount = () => {
  const newClicks = [...points];
  newClicks[selected] +=1;
  setPoints(newClicks);
}


const handleClick = () => {
  const randomNumber = Math.floor(Math.random()*props.itemsToVote.length);
  setSelected(randomNumber);
}

  return (
    <div>
      <p>{props.itemsToVote[selected]}</p>
      <p>Has {points[selected]} votes</p>
      <button onClick={handleClick}>Next</button>
      <button onClick={votesCount}>Vote</button>
    </div>
  )
}

const itemsToVote = ["item1", "item2", "item3", "item4", "item5", "item6", ]

如何在 Reactjs 中使用 clickHandler 和 useState 更新对象数组

How to update an array of objects with clickHandler and useState in Reactjs

arrays

updating

object

reactjs