Estoy tratando de establecer el estado de un objeto ( teethData.data ) en reacción en función de los accesorios pasados al componente ( props.toothData ). si el objeto props pasado tiene una longitud cero, entonces se establece. Si props.toothData tiene una longitud cero, entonces se le da un valor predeterminado a una variable givenToothData para que teethData.data tenga un valor predeterminado; de lo contrario, teethData.data simplemente se establece en props.toothData . Sin embargo, teethData.data no cambia la forma en que lo quiero también si props.ToothData no tiene una longitud cero
A continuación se muestra mi código, ¿hay algún consejo?
function TableArray(props) { const navigate = useNavigate(); console.log(props.toothData); var givenToothData = props.toothData; if (Object.keys(props.toothData).length === 0) { console.log("this happened", props.toothData); givenToothData = { 1: { pp: false, C14: false, GI0: false, GI23: false, PDI: false, GR: false, F13: false, M03: false, }, 2: { AB: false, AT: false, EH: false, TI: false, TLUX: false, O: false, GH: false, OST: false, ONF: false, FX: false, CA: false, OM: false, D: false, DX: false, }, 3: { RTR: false, TR: false, SN: false, TA: false }, 4: { TFXUCF: false, TFXCCF: false, TFXUCRF: false, TNE: false, TPE: false, }, } console.log("this happened", givenToothData); } const [teethData, setTeethData] = useState({ tooth: props.tooth, data: givenToothData }); console.log(teethData.data, "runthisfirst \n", givenToothData, props.teethData);El argumento del enlace useState se asigna solo una vez cuando su componente se monta por primera vez. En la ejecución posterior de la función, no establecerá ese valor. Intente usar useEffect para establecer el estado cada vez que cambien sus accesorios. es decir, useEffect(() => { // your logic to update state },[props.toothData]) .