Estoy haciendo una tabla que muestra datos.
const [body, setBody] = useState<JSX.Element[]>() const reduxSelectorValue = useSelector(state => state.someReducer.value) // [4,5,6,7] const [thisState, setThisState] = useState<number[]>([1]) useEffect(()=>{ setThisState(reduxSelectorValue) ) },[reduxSelectorValue]) useEffect(() => { setBody( thisState.map((value: number, index: number) => ( <div onClick={() => { setThisState((thisState) => { const newThisState = thisState.slice() newThisState[index] = newThisState[index] + 1 - 3 return newThisState }) }} > {value} </div> )), ) }, [thisState]) render( <ATableElement body={body}/> ) Cuando hago clic en el botón no hay cambios en el body
¿Cómo debo hacerlo con este problema?
Prueba esta corrección:
const reduxSelectorValue = useSelector(state => state.someReducer.value) // [4,5,6,7] const [thisState, setThisState] = useState<number[]>([1]) useEffect(()=>{ setThisState(reduxSelectorValue) ) },[reduxSelectorValue]) body(list){ let bodyContent = list.map((value: number, index: number) => ( <div onClick={() => { setThisState((thisState) => { const newThisState = thisState.slice() newThisState[index] = newThisState[index] + 1 - 3 return newThisState }) }} > {value} </div> )) return <ATableElement body={bodyContent}/> } render( return body(thisState) )Así es como podría abordar el problema.
Tenga un estado donde esté almacenando la matriz de números.
map sobre el estado para crear los botones. Puede convertirlos en hijos de ATableElement si necesita tener un contenedor hecho a partir de otro componente.
Cuando se llama a un detector de clics, llame a la función handleClick . Esto resuelve el índice del botón dentro del contenedor, copia el estado y luego actualiza el índice de ese nuevo estado. Luego puede establecer el estado con esa matriz actualizada.
const { useEffect, useState } = React; function Example() { const [ state, setState ] = useState([1, 2, 3, 4]); useEffect(() => console.log(state), [state]); function handleClick(e) { // Destructure the children from the parent of // the element that was clicked (ie // all the input elements) const { parentNode: { children } } = e.target; // Find the index of the button that was clicked const index = [...children].indexOf(e.target); // Copy the state const newState = [...state]; // Toggle the boolean at the index of // the `newState` array newState[index] = state[index] + 1 - 3; // Update the state setState(newState); } return ( <ATableElement> {state.map(n => { return ( <button onClick={handleClick} >Click {n} </button> ) })} </ATableElement> ); }; function ATableElement({ children }) { return <div>{children}</div> } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>