Javascript 如何仅在从后端获取数据后调用useEffect中的函数？

我必须实现的是，按照从第一次渲染本身开始的排序顺序显示作为api响应而获得的数据

以下是我使用useEffect挂钩的方式：-

useEffect(()=>{
        async function fetchProject() {
            await axios.post(envurls.wv+'/show_project',{
                params:{
                    authtoken:authtoken,
                    user:user
                }
            }).then((response)=>{
                console.log('Res', response.data);
                setShowProject(response.data)
                
            }).catch((error)=>{
                console.log(error)
            })
        }
        fetchProject();
        
    },[]);

    useEffect(() => {
        showProject.length> 0 && sortArray();
    }, []); 

   
    const sortArray = ()=> {
        const sortProperty = 'timestamp';
     
        sorted = [...showProject].sort((a, b) => (a[sortProperty] > b[sortProperty] ? -1 : 1))
        console.log("Project", showProject);
        console.log("Sorted Data", sorted);
        setShowProject(sorted);
    };

但在第一次渲染时，它不会对数据进行排序，因为showProject数组为空。所以，我在控制台上获取项目并将数据排序为空数组

如果我提供的showProject实际上是这样的：-

useEffect(() => {
    showProject.length> 0 && sortArray();
}, [showProject]); 

然后，它会显示第一次渲染本身的排序数据，但Project和排序数据会在console中显示n次。

您可以使用并设置状态中数据的依赖项和排序参数

usemo

将在一个依赖项发生更改时调用该函数，就像

useffect

一样，但这次它将返回我们从该函数返回的值

这样，我们就不会触及原始状态，而是在更改后对其进行排序

useffect（（）=>{
异步函数fetchProject（）{
const{data}=wait axios.post（envurls.wv+“/show_project”{
参数：{
authtoken:authtoken，
用户：用户
}
});
设置显示项目（数据）；
}
fetchProject（）.catch（e=>/*此处处理错误*/）；
}, []);
常量排序=使用备注（（）=>{
const sortProperty=“timestamp”；
//在这里使用排序参数
return[…showProject].sort（（a，b）=>
a[sortProperty]>b[sortProperty]？-1:1
);
}，[showProject，sortType]）；
控制台日志（已排序）；

据我所知，在第一次渲染时获取“排序数据”的唯一方法是通过道具将排序数据传递到组件中。您还不必要地更新了

showProject

两次，这将导致不必要的重播，@Asaf Aviv的回答是解决这一问题的好办法

只有在从后端获取数据后才调用函数的最佳方法是将函数调用放在

回调函数的内部，然后（）调用
回调函数，或者在等待后放在and
异步函数的内部。现在，您的
sortArray（）
没有执行这两项操作，它超出了
异步函数的范围，而
await
对它没有任何影响。组件渲染并检查
showProject.length>0
条件，如果满足该条件，则运行该函数

此外，您不需要在异步函数内部使用
.then（）
或
.catch（）
，这是一种更典型的方法：

async function fetchProject() {
  try {
    let response = await axios.post(envurls.wv + "/show_project", {
      params: {
        authtoken: authtoken,
        user: user
      }
    });
    // everything past here runs ONLY AFTER getting a response back from axios.post
    setShowProject(response.data)
  } catch (err) {
    console.log(err);
  }
}
   

为什么排序数组函数需要在useffect中？此外，由提取填充的状态将始终是第一次呈现时的默认状态。您不能在收到它时对其进行排序吗？因为，我必须根据其他状态对数据进行排序，例如排序类型“asc”或“desc”。所以每次用户从asc切换到desc时，都应该调用Sortaray。因此，我将[sortType]作为第二个参数传递给useEffect of SortArray。如果useEffect依赖于状态
showProject
，则应将其放入依赖项数组中。另外，您并没有将任何内容传递给
sortArray
I试图传递showProject，但它在控制台中多次显示数据。我忘了把它加在这里了。。我刚刚编辑了代码。因此，您创建了一个已排序的备忘录，但由于它不是一个函数，如果要将sortProperty作为参数传递，该怎么办。@AnkitJaishwal您可以将
sortProperty
保存在状态中，或通过
道具传递它，并将其包含在依赖项数组中。这样，当您更新它时，
usemo
将自动重新运行提供的功能。您也可以只在渲染中排序，但我认为
usemo
会使它更干净，并且只在需要时运行