使用 useEffect 的结果

Question

我对两个单独的 API 进行了两次调用，我想创建第三个结果，它是前两个结果的组合。但是我无法访问变量。

export default function AutoServices() {
  const [data, setData] = useState();
  const [a, setA] = useState();
  const [b, setB] = useState();
  const [C, setC] = useState();

  useEffect(() => {
    FetchCurrentPage(result => setData(result.content.default));
    FetchAutoServices(result => b(result.records));
    FetchSetAccel("/locationsinit", result => setA(result.serviceGroups));
    setC(AddDesc(a, b));
  }, []);


  function AddDesc(x, y) {
    var result = x;
    for (var i = 0; i < result.length; i++) {
        for(var j = 0; j < y.length; j++)
        {
            if(result[i].slug === y[j].iconclass)
            {
                Object.assign(result[i], {Desc: y.content.default.teaser});                
            }
        }      
    }
    return result;
  }  
  return (    
    <>
      {data && (
        <Helmet> ...........

浏览器的错误是无法读取引用 for 语句第一行的未定义的属性 'length' 我知道我的代码正在返回 json 因为当我检查 chrome 时我可以看到 json

Answer 1

状态更新是异步的，这就是为什么当您在同一个 useEffect 闭包中调用 AddDesc 时 a 仍然未定义的原因。您可以使用 a 和 b 添加第二个 useEffect 作为依赖项：

useEffect(() => {
  FetchCurrentPage(({ content }) => setData(content.default));
  FetchAutoServices(({ records }) => setB(records));
  FetchSetAccel("/locationsinit", ({ serviceGroups }) => setA(serviceGroups));
}, []);

useEffect(() => {
  if (a && b) setC(AddDesc(a, b));
}, [a, b]);

Answer 2

您正在处理异步代码，因此您必须等待前两个解决。您可以使用 Promise.all，然后对结果做任何事情*可能像：

useEffect(() => {
  FetchCurrentPage(result => result.content.default)
  const [a, b] = Promise.all([
    FetchAutoServices(result => result.records),
    FetchSetAccel("/locationsinit", result => result.serviceGroups);
  ]);
  setC(AddDesc(a, b));}, 
[]);

使用 useEffect 的结果

Using the results from useEffect

javascript

reactjs

use-effect