为什么当我使用 setState() 时我的变量在 React.js 中被清空答案

【问题标题】：Why is my variable emptied in React.js when I use setState()为什么当我使用 setState() 时我的变量在 React.js 中被清空
【发布时间】：2022-07-13 22:01:57
【问题描述】：

我正在创建一个简单的卡片列表，我需要根据选择的标签对其进行过滤。我有：

function Homepage() {
  const [cards, setCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  let filteredTags = [];

标签是带有onClick={toggleSingleTag}的按钮，然后我有这个功能：

function toggleSingleTag(e) {
  if (!filteredTags.includes(e.target.innerHTML)){
    filteredTags.push(e.target.innerHTML);
  } else {
    filteredTags = filteredTags.filter(function(elem){
      return elem != e.target.innerHTML;
    })
  }
  // setFilteredCards(filteredTags)
}

如果我在函数末尾 console.log 过滤标签，我会得到预期的结果（标签被包含或从列表中删除）。但是当我尝试添加 setFilteredCards() （删除该行的注释）并 console.log 值时，我明白了：

filteredTags 只包含最后点击的项目 (n)，无论在 n-1 处点击了什么。所以看起来每次触发函数之前列表都被清空了，否则如果 n == n-1 列表应该是空的。
filteredCards 只包含 n-1 个元素。

我做错了什么？我该如何解决这个问题？

【问题讨论】：

你能提供一个问题的演示吗？任何时候你打电话给setFilteredCards，它都会将filteredCards设置为你传递的任何东西。这在什么方面不起作用？
"每次触发函数前都会清空列表" - 更具体地说，每次渲染组件时都会声明一个新的空列表：let filteredTags = [];

标签： javascript reactjs use-state

【解决方案1】：

这是因为每当触发 setFilteredCards 时，它都会导致您的状态更新并且组件将重新呈现，这就是您在 filtersTags 中存储的值再次重新启动的原因。

function Homepage() {
  const [cards, setCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  const [filteredTags,setFilteredTags] = useState([]);

function toggleSingleTag(e) {
  if (!filteredTags.includes(e.target.innerHTML)){
    setFilteredTags((ft)=>ft.push(e.target.innerHTML))
    //filteredTags.push(e.target.innerHTML);
  } else {
    setFilteredTags((ft)=>{ft.filter(function(elem){
      return elem != e.target.innerHTML;
    })})
    /*filteredTags = filteredTags.filter(function(elem){
      return elem != e.target.innerHTML;
    })*/
  }
  // setFilteredCards(filteredTags)
}

【讨论】：