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 是字符串。

如果是这种情况，那么解决方案是更换

===

和

==

问题将得到解决