React Native TypeScript useEffect 不更新数组

Question

我正在尝试使用 Pusher、Typescript 和 React Native 创建实时投票，但候选人数组没有更新并显示在 useEffect 函数上。但是当我从正常投票中运行相同的代码行时，它可以工作（候选人数组已更新并正确显示）；

const [candidates, setCandidates] = useState([]);

const vote = (id, position, name, name2) => {
  var newVoteData = ({ voterName: votingData.voterName, voterId: votingData.voterId, position: position, candidateId: id, candidateName: name });
  setProcessingModal(true);
  fetch("http://172.20.10.4:8000/mobile/vote", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(newVoteData),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.status == "ok") {
       // This block of code works, updates the particular        
       // candidate voteCount and setCandidates correctly
        setProcessingModal(false);
        alert("Yay!!! , you have successfully voted");
        const updatedData = candidates.map(x => (x.id === id ? { ...x, voteCount: data.voteCount } : x)); //updates votecount on candidate

        let newArr = updatedData.sort((x, y) => {
          return y.voteCount - x.voteCount;
        });
        setCandidates(updatedData);
      } else {
        setProcessingModal(false);
        alert(data);
      }

    })
    .catch((error) => {
      setProcessingModal(false);
      alert(error);
      console.error("Error:", error);
    });
};

下面的 useEffect 函数是有问题的地方，由于某种原因数组没有被更新

useEffect(() => {

  const liveUpdateCandidates = (id, voteCount) => {

    alert(voteCount);
    const updatedData = candidates.map(x => (x.id === id ? { ...x, voteCount: voteCount } : x));//updates votecount on candidate does not work here
    console.log("afer");
    let newArr = updatedData.sort((x, y) => {
      return y.voteCount - x.voteCount;
    });
    setCandidates(newArr);
  };

  //Pusher.logToConsole = true;
  const pusher = new Pusher("3580cab8bee36d295917", {
    cluster: "eu",
    encrypted: true,
  });

  const channel = pusher.subscribe("votebooth-channel");
  channel.bind("App\\Events\\BoothEvent", function(data) {
    liveUpdateCandidates(data.candidateId, data.voteCount);
  });


  return (() => {
    pusher.unsubscribe("votebooth-channel");
    // pusher.unsubscribe('channel_name2');
  });
}, [candidates]);

下面是返回数组的示例

[
  { "id": "3", "name": "Kwaku", "candidateUserId": null, "gender": "Male", "philosophy": "Good", "voteCount": "132" },
  { "id": "22", "name": "rose", "candidateUserId": null, "gender": "Female", "philosophy": "Php", "voteCount": "1" },
];

Answer 1

我可以解决一些问题。

首先，您使用的是cantivates作为依赖性和使用setCandidates内部的使用效率。使用效应中的依赖项意味着每次依赖关系值都会触发。

这意味着使用效应将进入一个循环，它很可能会崩溃，并且无效

。您应该删除它。

最后，您的代码需要一些重构。尝试对侦听器使用一种使用效果，而另一个使用效率来更新数据。另外，如果它有几行，我将其提取到具有清晰名称的功能。

Answer 2

似乎由于某种原因将ID变量发送到LiveUpDateCandidates函数作为字符串发送，因此我必须首先将其转换为int。如下

const liveUpdateCandidates = (id, voteCount) => { 
  alert(id);
        var candId = parseInt(id);// the solution is to convert the id to int first
                const updatedData = candidates.map(x => (x.id === candId ? { ...x, voteCount: voteCount } : x));//updates votecount on candidate
                let newArr = updatedData.sort((x,y) => {return y.voteCount - x.voteCount});
                setCandidates(newArr);   
        };