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

如何在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;

import React，{useState}来自“React”；
常量文本投票=（）=>{
const[voces，setvoces]=useState([
{文本：'oneone'，投票：0}，
{案文：“TwoTwo”，表决：5}，
{文本：'Three'，投票：0}
]);
常量votesHandler=（）=>{
常数newClicks={
…投票，
投票：投票[1]。投票+1
};
设置投票（新点击）；
};
返回(
{投票[1]。文本}
选票
{投票[1]。投票}
);
};
导出默认文本投票；

---

想知道如何更新阵列以及单击更新后的一些反馈。现在它应该只更新一个对象，但它不是。其基本思想是为评论投票，并以最多的票数返回评论。这是一个模型，只是为了了解它如何工作。我无意渲染整个数组。就是那个得票最多的

投票的初始值是数组。但是你把它当作一个物体

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

你应该这样做

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

---

享受吧

这种方法怎么样？每个项目的初始0票数组存储在一个状态中，然后随着每次“投票”单击而递增，并存储在该数组中，该数组将随着每次单击而更新。而且，每次它都会显示一个随机项。当然，您可以更改数组的长度（项目数）

const-App=（道具）=>{
const[selected，setSelected]=useState（0）；
常数[点，设定点]=使用状态（新Uint8Array（6））；
常量votescont=（）=>{
const newClicks=[…点]；
新建单击[所选]+=1；
设定点（新点击次数）；
}
常量handleClick=（）=>{
const randomNumber=Math.floor（Math.random（）*props.itemsToVote.length）；
选择的集合（随机数）；
}
返回(
{props.itemsToVote[selected]}

有{点[选定]}票

下一个
选票
)
}
const itemsToVote=[“item1”、“item2”、“item3”、“item4”、“item5”、“item6”，]

目前，您没有更新对象数组，只是更改数组中的一个元素。如果要渲染多个元素和/或它们的相关投票，则应映射到它们并为每个元素渲染一个元素。然后，您可以使用单击处理程序将索引或唯一映射器传递给您的数据，以更新可能的副本

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", ]