javascript - 对组件属性进行 react 等待

Question

我有一个用于调用同步函数executeCode的组件。 问题是我的 executeCode 是异步函数，该函数返回 true 或 false，但现在我的函数是异步的，我需要使用await获取值，因为异步函数给出了 promise 。问题是我无法使用await，我尝试了匿名函数或带有.then()的 promise ，但它在这种情况下不适用，因为我立即需要该值。 executeCode 现在是异步的，因为其他操作需要它。

executeCode = async ( methodCode ='', params = {} ) => {
  const result = await crudCode[methodCode](params);
  return result.valueToReturn;
};

render() {
  return (
    <Field
      name="datedeferred"
      component={FormField}
      executeCode={this.executeCode}
      typeInput="text"
      disabled={ 
        this.executeCode( 'onDisabled', { inputFullNameWithLine: 'datedeferred',formProps: this.props })
      }
    />
  );
}

Answer 1

在您在伪代码中使用的示例中，每当触发重新渲染时，都会调用异步函数，但渲染取决于结果 - 因此会陷入死胡同。解决方案是观察相关变量的更改，然后在更改时触发异步。获取异步结果并设置状态管理变量。 React 将检测托管变量的变化并触发重新渲染。见下文。

const [buttonDisabled, setButtonDisabled] = useState<boolean>(false)

useEffect(() => {
  someAsnycCheck().then(result => setButtonDisabled(result));
},[params])

return (
  <button disabled={buttonDisabled}...>
)

这基本上意味着:观察 params 的变化，然后调用异步函数。当结果到达时，将 buttonDisabled 设置为结果。