Así que tengo mi código así:
var problems = ['a','b','c']; var allProblemStatus; var selectProblemStatus = ""; useEffect(() => { let getProblemStatus = async() => { let response = await fetch('http://127.0.0.1:8000/api/problem-status/'); allProblemStatus = await response.json(); selectProblemStatus = allProblemStatus['problem_status']; } getProblemStatus(); }, []); return ( <div> {problems.map((problem, index) => ( <Grid item xs={200} md={100} lg={5}> <Problem key={index} problem={problem} a={selectProblemStatus} /> </Grid> ))} </div> ); selectProblemStatus se está cambiando en useEffect, pero ¿cómo lo uso realmente para pasarlo al componente Problem como accesorio? También hay una forma de consola. Registrar el selectProblemStatus modificado
está claro que no está familiarizado con useState hook en reaccionar. su enfoque debe verse así:
import { useState } from 'react' const YourComponent = (props) => { const [problems, setProblems] = useState([]) const getProblemStatus = async () => { ... } useEffect(() => { getProblemStatus() }, []) return ( <div> {problems.map((problem, index) => ( <Grid key={index} item xs={200} md={100} lg={5}> <Problem problem={problem} a={selectProblemStatus} /> </Grid> ))} </div> ) }Puede usar el gancho useState() para sus variables y luego actualizarlas en useEffect . Aquí hay un enlace sobre cómo usar useState https://uk.reactjs.org/docs/hooks-state.html