如何正确处理需要等待加载先前常量的代码？

Question

这里是对渲染之前的一段长代码的更改，它浪费了我的时间来更正代码中的许多行：

之前：

const my_model:MyModel = JSON.parse(localStorage.getItem('my_model')!)
const my_positions:MyModel = JSON.parse(localStorage.getItem('my_positions')!)

之后：

const waitformyIcm:Boolean = useDetailMyModelQuery(paramid.id).isSuccess;
const myIcm:undefined | MyModel| any = useDetailMyModelQuery(paramid.id).data
const waitforpositions:Boolean = usePatternPositionsPerModelQuery(paramid.icm).isSuccess;
const positions:undefined | PatternPositions[] = usePatternPositionsPerModelQuery(paramid.icm).data

结果是，对于几乎所有下一个常量，我需要让程序等到第一行完成加载。我的问题是如何应对这种情况，因为我觉得我的做法不应该：

例如，前一行已经导致崩溃：

const harvestAfter:number[] = [myIcm.length_period1, myIcm.length_period2, myIcm.length_period3]

解决方法是：

const harvestAfter:number[] = waitformyIcm && [myIcm.length_period1, myIcm.length_period2, myIcm.length_period3]

另一个挑战是为必须首先加载的数据设置默认状态。我解决了这个问题：

const [myFilters, setMyFilters] = useState(myfilters);
useEffect(() => setMyFilters(myfilters), [myfilters && waitforpositions]);

在REACT中如何正确处理需要等待之前常量加载的代码？

使用 myconst && ......?
使用 useEffect?
使用 useRef?
使用异步等待（如何声明常量）
其他?

Answer 1

请不要多次调用同一个钩子，那只会浪费用户内存和 CPU 时间。（这些挂钩在内部工作，您无缘无故地调用了它们两次。）
只是不要在此处注释类型并将它们分配给变量。它们已经是 100% 类型安全的了。

然后，使用skip:

const icmResult = useDetailMyModelQuery(paramid.id);
const patternsResult = usePatternPositionsPerModelQuery(paramid.icm, { skip: !icmResult.isSuccess });

至于变量赋值，你也可以使用解构，虽然我不太明白这一点：

const { isSuccess: waitformyIcm, data: myIcm } = useDetailMyModelQuery(paramid.id);

至于默认状态，有很多种方法。如果它是您定义的内联对象，它将是每个渲染器的新引用，因此您最好 useMemo 解决这个问题：

const filtersWithDefaults = useMemo(() => filters ?? defaultFilters, [filters])

如何正确处理需要等待加载先前常量的代码？

How to properly deal with code that need to wait for previous constants to be loaded?

typescript

reactjs

rtk-query