仅在第一次use效应提取已触发并在上下文中设置用户后运行use效应提取

Question

我需要调用dropbox api两次。第一个useffect获取名称和路径，然后将它们推送到上下文中的空白数组中。然后我需要激发第二个useEffect，它依赖于从第一个useEffect填充的数组。我尝试使用state并创建loading和setload，然后将useffect的内部封装在和if（loading）中，但这不起作用，因为我猜它只会在安装组件时尝试触发。第一个useEffect完成后，如何运行第二个useEffect？

const [user, setUser] = useContext(UserContext);

第一次使用效果：

useEffect(() => {
    var myHeaders = new Headers();
    myHeaders.append(
      'Authorization',
      'Bearer XXXXXXXXXXXXXXX',
    );
    myHeaders.append('Content-Type', 'application/json');

    var raw = JSON.stringify({path: `/${user.username}`});

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow',
    };

    fetch('https://api.dropboxapi.com/2/files/list_folder', requestOptions)
      .then(response => response.json())
      .then(data => {
        let tmpArray = [];
        let tmpArrayTwo = [];
        for (var i = 0; i < data.entries.length; i++) {
          tmpArray.push(data.entries[i].name);
          tmpArrayTwo.push(data.entries[i].path_lower);
        }
        setUser({
          ...user,
          imageNames: tmpArray,
          imagePaths: tmpArrayTwo,
        });
      })
      .catch(error => console.log('error', error));
  }, []);

第二次使用效果：

useEffect(() => {
    let tmpArray = [];
    var myHeaders = new Headers();
    myHeaders.append(
      'Authorization',
      'Bearer XXXXXXXXXXXXXX',
    );
    myHeaders.append('Content-Type', 'application/json');

    for (var i = 0; i < user.imagePaths.length; i++) {
      var raw = JSON.stringify({path: `/${user.imagePaths[i]}`});
      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow',
      };
      fetch(
        'https://api.dropboxapi.com/2/files/get_temporary_link',
        requestOptions,
      )
        .then(response => response.json())
        .then(data => {
          tmpArray.push(data.link);
        })
        .catch(error => console.log('error', error));
    }
    console.log(tmpArray);
    setUser({
      ...user,
      imageLinks: tmpArray,
    });
  }, []);

我认为它与依赖数组有关，但我在其中放入的所有内容（如user、setUser）都给了我一个无限循环和控制台。用户的日志。imagePaths保持日志记录为[]。我认识用户。ImagePath在第一个useEffect之后填充，但是第二个useEffect对于用户来说一直是未定义的。图像路径。循环的长度。

Answer 1

据我所知。我建议您首先使用状态，以便使您的数据处于React的生命周期中。

const [listFolders, setListFolders] = React.useState([])
const [user, setUser] = React.useState({})

您的第一个use效应将加载到组件的第一个挂载上，并且在函数结束时的[]位置之后不会得到回调。这允许告诉React仅在无依赖时触发效果。

useEffect(() => {
   ...
}, [])

仅当阵列listFolders更改时，才会加载第二个useEffect。除此之外，这里的目标是连接您的所有promise，以便它只更新用户一次。否则我们将有异步的问题。

useEffect(() => {
   if(listFolders.length){

      Promise.all([*put all your promise here*]).then((data) => {
          * concatenate your array of link
          setUser({
             ...user,
             imageLinks: arrayOfLinks,
          })
      })
    }
}, [listFolders])

Answer 2

您应该添加用户。第二个useEffect的依赖项列表的ImagePath。

我建议使用async/wait并在单一使用效果中进行调用。

如果默认情况下用户未定义，那么您可能需要添加可选的链接。

[更新]

尝试改变第二个使用效果：

useEffect(() => {
    var myHeaders = new Headers();
    myHeaders.append(
        'Authorization',
        'Bearer XXXXXXXXXXXXXX',
    );
    myHeaders.append('Content-Type', 'application/json');

    if (!user?.imagePaths) {
        return;
    }

    Promise.all(user.imagePaths.map(path => {
        var raw = JSON.stringify({path: `${path}`});
        var requestOptions = {
          method: 'POST',
          headers: myHeaders,
          body: raw,
          redirect: 'follow',
        };
        return fetch(
          'https://api.dropboxapi.com/2/files/get_temporary_link',
          requestOptions,
        )
          .then(response => response.json())
          .then(data => data.link)
          .catch(error => console.log('error', error));
      }),
    ).then(imageLinks => {
      setUser({
        ...user,
        imageLinks,
      });
    });
  }, [user?.imagePaths]);