Question

我想将一个数组分成两个数组。

问题是我想分成两个的主数组来自服务器，我需要等到它加载之后。

这是我的代码。

这是useSafeFetch 自定义钩子，它负责获取数据（通过正常工作，只需将其粘贴到此处以显示所有代码即可）

const useSafeFetch = (url) => {
    const [data, setData] = useState([]);
    const [customUrl] = useState(url);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);

    useEffect(_ => {
        let didCancel = false;
        const fetchData = async () => {
            if(didCancel === false){
                setIsError(false);
                setIsLoading(true); 
            }
            try {
                const result = await axios(customUrl);
                if(didCancel === false){
                    setData(result.data);
                }
            } catch (error) {
                if(didCancel === false){
                    setIsError(true);
                }
            }
            if(didCancel === false){
                setIsLoading(false);
            }
        };
        fetchData();
        return () => {
            didCancel = true;
        };
    }, []);

    return {
        data,
        isLoading,
        isError,
    }
}

我尝试编写一个返回两个独立数组的函数

export default _ => {
    const {data,isLoading,isError} = useSafeFetch(`my api`);

    useEffect(_ => {
        console.log(data); // length 11
        const mainA = splitTwoArrays(data);
        console.log("progress",mainA.progressHalf); //length 5
        console.log("circle", mainA.circleHalf); //length 1
    });

    const splitTwoArrays = mainArr => {
        const half = mainArr.length >>> 1;
        let progressHalf = mainArr.splice(0, half);
        let circleHalf = mainArr.splice(half, mainArr.length);
        console.log(mainArr);
        return {
            progressHalf,
            circleHalf,
        }
    }

    return (
        //do something with data
    )   
}

这不能正常工作。

您可以看到main data的长度为 11 ，但是函数splitTwoArrays split的排列方式错误。 progressHalf的长度是5，另外circleHalf的长度是1，但是circleHalf的长度是6。

下次尝试：

使用useEffect

export default _ => {
    const {data,isError,isLoading} = useSafeFetch(`my api`);

    const [progressHalf,setProgressHalf] = useState([]);
    const [newArr,setNewArr] = useState([]);
    const [half,setHalf] = useState(0);

    useEffect(_ => {
        setHalf(data.length >>> 1);
        setNewArr(data);

        const partArr = newArr.slice(0, half);

        setProgressHalf([...progressHalf, ...partArr]); 

    })

    return (
        //do something with data
    )
}

当我取消对setProgressHalf([...progressHalf, ...partArr]);部分的注释时，这将进入无限循环。

我尝试给useEffect一些依赖，但不幸的是，这也行不通。

Answer 1

我自己解决这个问题。

  const { data } = useSafeFetch("https://jsonplaceholder.typicode.com/users");
  const [copiedData, setCopiedData] = useState([]);
  const [halfArr, setHalfArr] = useState([]);
  const [secHalf, setSecHalf] = useState([]);
  const [half, setHalf] = useState(0);

  useEffect(
    _ => {
      setCopiedData([...data]);
      setHalf(data.length >>> 1);
      setHalfArr([...copiedData.slice(0, half)]);
      setSecHalf([...copiedData.slice(half, copiedData.length)]);
    },
    [data, half]
  );

  console.log(halfArr);
  console.log(secHalf);

最后，您将获得两个从服务器获取的主数据创建的数组。

Codesandbox

数组拆分React挂钩

1 个答案: