对组件属性做出等待等待

Question

我有一个组件用来调用同步函数executeCode。 我的executeCode 的问题是异步函数，这个函数返回true 或false，但是现在我的函数是异步的，我需要使用等待来获取值，因为异步函数给出了一个承诺。问题是我不能使用等待，我已经尝试了匿名函数或.then() 的承诺，但它不适用于这种情况，因为我立即需要该值。 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

您可以在 componentDidMount 中运行您的 async 函数并将结果放入 state 并使用它。

示例

function someAsyncCheck() {
  return new Promise(resolve => setTimeout(() => resolve(true), 1000));
}

class App extends Component {
  state = { loading: true, disabled: false };

  async componentDidMount() {
    const result = await someAsyncCheck();
    this.setState({ loading: false, disabled: result });
  }

  render() {
    const { loading, disabled } = this.state;

    if (loading) {
      return null;
    }

    return <input disabled={disabled} />;
  }
}