Problema: por alguna razón, mi estado de sev submittedSev
no parece volver a representarse en el DOM al llamar a su función de actualización de estado setSubmittedSev()
. Sin embargo, puedo ver los registros de la consola para el parámetro sev
. ¿Por qué está pasando esto?
Resultado esperado : espero que el componente emergente se vuelva a procesar al llamar a la función submittedSev()
. Y así, para que mi texto almacenado en la variable de datos también se actualice.
ventana emergente.tsx
const App: React.FC<{}> = () => { const [submittedSev, setSubmittedSev] = useState('High'); const data = [{ title: 'Title example', summary: 'Summary Example', body: `${submittedSev}`, sevChange: true } ] const selectOptionHandler = (index) => { setCurrentOption(data[index]); }; const submittedSevChangeHandler = (sev) => { setSubmittedSev(sev); // Not triggering re-render console.log(sev) // Correctly logs to the console }; return ( <div className="App"> <aside> <ResponseList onSelectOption={selectOptionHandler} responseData={data} /> </aside> <main> <ResponseDetail details={currentOption} onChangeSubmittedSevHandler={submittedSevChangeHandler} /> </main> </div> ); };
ResponseDetail.tsx: componente secundario
const ResponseDetail = (props) => { const submittedSevUpdateChangeHandler = (e) => { props.onChangeSubmittedSevHandler(e.target.value); }; return ( <select onChange={submittedSevUpdateChangeHandler}> <option value="Low">Low</option> <option value="Medium">Medium</option> <option value="High">High</option> </select> ) }