reactjs - 如何检测过滤器不工作的错误reactjs

Question

嗨我点击“删除”按钮filter用于删除我不需要的数据，但不工作并且没有任何错误通知，所以我不知道如何检测我的项目。

import ColorCards from "./ColorCards";
import React, { useState } from "react";
import data from "./initialState.json";

export default function CardsafterEvents() {
  const [colors, setColors] = useState(data.colors);
  const onRemove = (id) => setColors(colors.filter((color) => color.id !== id));

  return (
    <>
      <ColorCards handleDelete={onRemove} />
    </>
  );
}

完整项目链接：https ://codesandbox.io/s/material-demo-forked-62eh0?file=/CardsafterEvents.js:0-379

标签： reactjsmaterial-uiuse-state

Answer 1

您需要将 传递colors给您的ColorCards元素

• CardsafterEvents.js

export default function CardsafterEvents() {
  const [colors, setColors] = useState(data.colors);
  const onRemove = (id) => setColors(colors.filter((color) => color.id !== id));

  return (
    <>
      <ColorCards colors={colors} handleDelete={onRemove} />
    </>
  );
}

在您的ColorCards元素中，不仅使用来自 的数据initialState，还从其父元素接收colors道具，并优先使用它useMemo：

• ColorCards.js

// ...
import React, { useMemo } from "react";
import data from "./initialState.json";

export default function ColorCards({ colors, handleDelete = (f) => f }) {
  const dataColors = useMemo(() => colors || data.colors, [colors]);

  return (...);
}

这是工作示例