reactjs 如何使用从API获取设置附加状态？

wsxa1bj1 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(104)

我有一个自定义的钩子，我可以在其中设置数据，但另外我想从响应中构建列，但我得到了〉〉columns〈〈的空数组，这是钩子在初始化之前返回的。

const urls: string[] = [
  "https://jsonplaceholder.typicode.com/posts",
  "https://jsonplaceholder.typicode.com/comments",
  "https://jsonplaceholder.typicode.com/albums",
  "https://jsonplaceholder.typicode.com/photos",
  "https://jsonplaceholder.typicode.com/todos",
];

const useTable = (idurl: number, actualcategory: string) => {
  const [data, setData] = useState<Data>();
  const current = useRef<Function>();
  const [columns, setColumns] = useState<Column[]>();
  let objcolumn: Column[] = [];

  const loadDatabase = async () => {
    const response = await fetch(urls[idurl]);
    const d = await response.json();

    objcolumn = [
      ...Object.keys(d[0]).map((t: string) => {
        let d: Column = { col: { title: t, disp: true } };
        return d;
      }),
    ];
    setColumns(objcolumn);
   };
  current.current = loadDatabase;
  useEffect(() => {
    current.current && current.current();

  }, [actualcategory]);
  return [data && data[actualcategory], columns] as const;
};

export { useTable };

reactjs

来源：https://stackoverflow.com/questions/75508262/how-can-i-set-additional-state-with-fetch-from-api

1条答案

按热度按时间

brgchamk1#

如果你的意思是第一个初始值，这是标准的行为，因为你的钩子有异步操作，而操作没有解析钩子返回默认值。
如果你指的是第二个返回值，你可以用减少状态数来修正它。每个状态的改变都会导致新的渲染。
您可以记住列值，无需保存在新的状态。
而且使用大量逻辑运算符可能会导致意外的布尔值。
我添加了any类型，因为在你的代码中没有显示类型。为了更好的可读性，我还更改了一些变量名。

const useTable = (idurl: number, actualcategory: string) => {
  const [data, setData] = useState<any>({})

  const loadDatabase = async () => {
    const response = await fetch(urls[idurl])
    const result = await response.json()

    setData(result)
  }

  const ref = useRef<Function>(loadDatabase)

  const columns = useMemo(() => {
    return data[0]
      ? [
          ...Object.keys(data[0]).map((t: string) => {
            let d: any = { col: { title: t, disp: true } }
            return d
          }),
        ]
      : []
  }, [data])
  
  useEffect(() => {
    if (ref.current) {
      ref.current()
    }
  }, [actualcategory, idurl])

  return [data[actualcategory] ? data[actualcategory] : [], columns] as const
}

这里不需要使用useRef。你可以在useEffect中调用函数。但是可能ref在其他没有给出的代码中使用，所以我没有修改ref。
这段代码运行良好。首先render钩子返回初始值，解析异步请求后返回新值。
https://codesandbox.io/s/elastic-feather-2tyfld?file=/src/App.tsx
如果它按您想要的方式工作，请写评论

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何使用从API获取设置附加状态？

1条答案

相关问题

热门标签

最新问答