ReactJS 在数组 [hooks] 状态之间切换

Question

大家好，你能帮我解决我遇到的问题吗？

所以，我有一个复选框和一个从 API 请求中获取的对象数组：

const ownRequest= [
{status: "pending", type: "aaa"},
{status: "pending", type: "bbb"},
{status: "pending", type: "bbb"},
{status: "pending", type: "aaa"},
{status: "pending", type: "aaa"}
]


export const Types= () => {
  const [checked, setChecked] = useState(true);
  const [ownRequest, setOwnRequest] = useState([]);

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await fetchTimeoffRequests();
      if (!ignore) {
        setOwnRequest(result);
      }
    }

    fetchData();
    return () => {
      ignore = true;
    };
  }, []);

  const req = checked ? ownRequest: ownRequest.filter(i=>i.type==="aaa")
  setOwnRequest(req);

  const handleCheck = (event) => {
    setChecked(!checked);
  }
}
return (
    <div className={classes.root}>
     <Checkbox onChange={(e) => handleCheck(e)} checked={checked} />
    </div>
}

我想显示这样的项目： 如果选中则显示所有项目，如果不仅是类型为："aaa" 的项目，还可以返回原始状态（如切换）

我做了一些事情，但我不知道如何进一步处理它

Answer 1

我认为你可能把它复杂化了：

const [checked, setChecked] = React.useState(false);
const req = [
    {status: "pending", type: "aaa"},
    {status: "pending", type: "bbb"},
    {status: "pending", type: "bbb"},
    {status: "pending", type: "aaa"},
    {status: "pending", type: "aaa"}
]

//Simple filter depending on the checked state with a ternary if
const ownRequest= checked ? req : req.filter(i=>i.type==="aaa")

const handleCheck = (event) => {
     setChecked(!checked);
}

<Checkbox onChange={(e) => handleCheck(e)} checked={checked} />

截至更新问题：

无限循环来自setOwnRequest(req);。这是因为 setOwnRequest() 每次更改都会导致重新渲染。

ReactJS 在数组 [hooks] 状态之间切换

ReactJS Toggling between states of array [hooks]

checkbox

reactjs

react-hooks

use-state