React Hooks：數組未在 useEffect Hook 中更新/更改

Question

這是我的代碼：

const [state, setState] = useState({
    isLoaded: false,
    data: [], // data here
    isError: false,
  });
  let { isLoaded, data, isError } = state;

...

const [refundItem, setRefundItem] = useState(0);
  useEffect(() => {
    const refundedData = data.map((item) => {
      // refundedData not changing here
      return item.paymentId === refundItem ? { ...item, isRefund: true } : item;
    });
    setState({ ...state, data: refundedData });
  }, [refundItem]);

data是一個對象數組。 我想找到一個data元素，其屬性paymentId是refundItem ，並將該元素的isRefund屬性值更改為true （-> 最初，所有元素的isRefund屬性都是false ）。

問題是refundedData data始終與data相同。

抱歉，我是 React 和 Javascript 的新手，感謝您的幫助。

編輯：天哪，我忘了提到 paymentId 和refundItem 都是數字類型。 抱歉打錯了😭😭

Answer 1

由於沒有更改refundItem，因此似乎根本不會觸發useEffect。 嘗試使用調試器查看 useEffect 函數是否被觸發或將控制台日志添加到 useEffect 並檢查它是否打印任何內容。

 useEffect(() => {
    console.log(`USE_EFFECT - dataLength: ${data.length} / refundedId: ${refundedItem}`);
    const refundedData = data.map((item) => {
      // refundedData not changing here
      return item.paymentId === refundItem ? { ...item, isRefund: true } : item;
    });
    setState({ ...state, data: refundedData });
  }, [refundItem]);

EDIT1：看着 Zohaib 的回答，它也讓我覺得你有 state refundItem 。 從名稱來看，我認為它可能是一個完整的對象，您需要從中獲取 id return item.paymentId === refundItem.id ? ... return item.paymentId === refundItem.id ? ...或者正如他所說的那樣，您可能正在比較兩種不同的類型，而===也會比較類型。 例子：

1 === 1(number === number) => true
"1" === 1(string === number) => false
"1" === "1"(string === string) => true
"1" == 1(string == number) => true

還要檢查您如何使用refundItem 。 由於它是一個狀態元素，您需要使用setRefundItem方法而不是簡單的分配，因為這將阻止 React 知道有任何更改，例如。

const updateRefundedItem = (newItem) => {
  refundedItem = newItem.id // <= this is bad
  setRefundedItem(newItem.id) // <= this is good :P
}

Answer 2

可能的問題=> 退款項目是數字類型，而 item.paymentId 是字符串。

如果是這種情況，那么解決方案是更換

===

和

==

問題將得到解決