Question

所以我试图在 useState 条件语句中使用 if-else 钩子 (React JS) 设置一个值。

我需要检查 addOnName 数组中是否有 addOnContainer（作为参数传递），如果有，我需要扣除 addOnPrice（这是也作为参数）使用 totalprice（setTotalPrice 钩子）传递给 useState。

如果 addOnContainer 不包括 addOnName，我必须将 addOnPrice 添加到 totalprice。

代码运行良好，因为它在 chrome 控制台中为我提供了正确的输出。但是当我尝试使用 useState 钩子设置总价时，只有 if 块运行，而无论条件如何，else 都不会运行。

我曾尝试将 useState 移出 if-else，但没有成功。

我在这里做错了什么？请注意，此函数设置为在单击复选框时执行。

const [totalPrice, setTotalPrice] = useState(200)

function selectAddOn(addOnName, addOnPrice) {
  let temp = totalPrice

  if (!addOnContainer.includes(addOnName)) {
    temp = totalPrice + addOnPrice

    setTotalPrice(temp)
  } else {
    //never reaches even if the condition is false when useState is used.

    temp = totalPrice - addOnPrice

    setTotalPrice(temp)
  }
}

Answer 1

每次重新渲染时，let addOnContainer = []; 都会重置为空数组。

您可以使用 useRef 来避免它：

const {useState, useRef} = React

function App() {

  const [totalPrice, setTotalPrice] = useState(200);
  const addOnContainer = useRef([]);
  // let addOnContainer = []; // This was the ISSUE

  function addToTotalPrice (addOnName, addOnPrice) {

    let temp = totalPrice;
    if(!addOnContainer.current.includes(addOnName)){
      addOnContainer.current.push(addOnName);
      temp = totalPrice + addOnPrice;
      setTotalPrice(temp)
    } else {
      temp = totalPrice - addOnPrice;
      setTotalPrice(temp);
    }
  }

  return (
    <button onClick={()=>addToTotalPrice('cheese',30)}>Click, totalPrice: {totalPrice}</button>
  );
}

ReactDOM.render(<App />, document.body)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

React useState 导致 if-else 无法正常工作

1 个答案: