时间戳

首页 > 解决方案 > 如何等待从 useEffect 设置值？

javascript - 如何等待从 useEffect 设置值？

问题描述

我们在获取数据数组时使用了 useMemo 和 useEffect。在第一个文件中，我设置了一个带有挂钩结果的 const（第二个文件）。但是结果被设置了两次，第一次结果是一个空对象。

我需要在 useEffect 完成工作后设置它。

我们有2个js文件

第一.js

const dataArray = useGetDataArray({ name, id });
console.log("Data Array: ", dataArray);

第二个.js

export const useGetDatArray = ({ name, id } = {}) => {
  const [data, setData] = useState({});

  const index = useMemo(() => {
    console.log("in useMemo");
    const client = thirdPartyProvider;

    return client;
  }, []);

  useEffect(() => {
    console.log("in useEffect");
   
    index
      .search(name, {
        numberOfResults: 12,
      })
      .then(res => setData(_.get(res, "result")));
  }, [index]);

  return data;
};

我的控制台看起来像这样

"in useMemo "
"Data Array:"  Object {  }
"in useEffect" 
"Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

如果可能的话，这就是我想要的

"in useMemo" 
"in useEffect" 
"Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

标签： javascriptreact-hooksuse-effectreact-usememo

解决方案

第一.js

useEffect(async () => {
  await useGetDataArray({ name, id });
  const dataArray = myContainer.data;
  console.log("Data Array: ", dataArray);
}, []);

第二个.js

export const useGetDatArray = ({ name, id } = {}) => {
  const index = useMemo(() => {
    console.log("in useMemo");
    const client = thirdPartyProvider;

    return client;
  }, []);

  useEffect(async () => {
    console.log("in useEffect");
    await myContainer.getData(index, name);
  }, [index]);
};

容器.js

function myContainer(){
  const [data, setData] = useState({});

  const getData = async (index, name) => {
    const indexData = await index.search(name, { numberOfResults: 12 });
    if (indexData) {
        await setData(indexData);
    }
  }

  return { data, getData };
}
export const MyContainer = createContainer(myContainer);

推荐阅读