数组拆分反应钩子

Question

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

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

这是我的代码。

这是useSafeFetch自定义 Hook，负责获取数据(顺便说一下，这工作正常，只需粘贴到此处即可显示所有代码(

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，但函数splitTwoArrayssplit数组的方式错误。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); 

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

代码沙盒