反应等待组件属性

Question

我有一个用于调用同步功能的组件executeCode。问题是我的 executeCode 是异步函数，这个函数是 return true 或 false，但现在我的函数是异步的，我需要使用 await 来获取值，因为异步函数给出了一个承诺。问题是我不能使用 await，我尝试过使用匿名函数或使用 .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} />;
  }
}

Answer 2

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


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

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

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

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

反应等待组件属性

react await on component property

javascript

reactjs

async-await

ecmascript-2017

反应等待组件 属性

react await on component property

javascript

reactjs

async-await

ecmascript-2017

反应等待组件属性