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> ) }