reactjs链过滤数组

Question

我想创建一个对数据进行链式过滤的函数

const [arrayData, setArrayData] = useState([]);
const array = [...arrayData];
const [readyData, setreadyData] = useState([...arrayData]);
  const finalData = (params) => {
    array.push(params);
    setArrayData(array);
    setreadyData(array);
  };

const filterData = (types) => {
    let filteredData = readyData.filter((data) => {
      return data.types.some((type) => types.includes(type.type.name));
    });
    dispatch({ type: "FINAL_DATA", payload: filteredData });
    setreadyData(filteredData);
  };

我将arrayData 作为默认值，readyData 作为我正在处理的过滤事件数据。

我的目标是创建一个链式过滤功能，但问题是在readyData被过滤一次后，由于数据不完整，因此无法再进行一次过滤。

Answer 1

由于readyData 是从arrayData 和types 派生的，因此将types 保存为状态会更容易，并使用useMemo 得到readyData。每当readyData 更改（接受挂载）时，使用useEffect 调度FINAL_DATA 操作。用setTypesData代替filterData更新typesData，重新计算readyData...

示例（未测试）：

const mount = useRef(false);

const [arrayData, setArrayData] = useState([]);
const [typesData, setTypesData] = useState([]);

const readyData = useMemo(() =>
  // filter arrayData if typesData is not empty
  typesData.length ? arrayData.filter(data =>
    data.types.some(({ type }) => typesData.includes(type.name))
  ) : arrayData
, [arrayData, typesData]);

useEffect(() => {
  // avoid dispatching on mount
  if(!mount.current) {
    mount.current = true;
    return;
  }

  dispatch({ type: "FINAL_DATA", payload: readyData });
}, [dispatch, readyData]);

// use setTypesData instead of filterData