En mi archivo JSX, tengo una función como esta.
async isPresent () { const res = await AsyncFunction(); if (res) { return true; } return false; }y luego usarlo en una representación condicional como
{ this.isPresent() && <div> Content </div> }Pero esto siempre devuelve verdadero.
¿Cómo puedo solucionar esto?
Tu puedes hacer:
const [isPresentResult, setIsPresentResult] = useState(false); useEffect(() => { this.isPresent().then(res => setIsPresentResult(res)) }, []) // ... { isPresentResult && <div> Content </div> }Usando el componente de clase:
class ExampleComponent extends React.Component { constructor(props) { super(props); this.state = { isPresentResult: false }; } componentWillMount = () => { this.isPresent().then((isPresentResult) => this.setState({ isPresentResult })); }; async isPresent() { const res = await AsyncFunction(); return !!res; } render() { return {this.state.isPresentResult && <div> Content </div>}; } }No puede tener lógica asíncrona en el renderizado. Debe extraer el booleano present en un estado y realizar la llamada asíncrona dentro de algo como componentDidMount y luego actualizar el estado present desde allí.
Consulte el siguiente ejemplo:
const sleep = (delay) => new Promise(res => setTimeout(() => res(true), delay)) class App extends React.Component { constructor() { super(); this.state = { present: false, }; } componentDidMount() { sleep(1000).then((res) => { if (res) { this.setState({ present: true }); } }); } render() { return <div>{this.state.present ? "Present": "Not Present"}</div>; } } ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>