0
343
VistasJavascript / React: ¿cómo actualizar los valores de una matriz multidimensional con los valores de una entrada `select` dentro de un bucle forEach?
Estoy tratando de actualizar los valores de una matriz multidimensional con los valores de una entrada de select dentro de un bucle forEach. Es una matriz que contiene dos matrices internas. Cada vez que cambio los valores con la entrada de select , ambas matrices internas se actualizan. ¿Cómo puedo hacer que las matrices internas se actualicen individualmente? códigos y caja - https://codesandbox.io/s/multidimensional-array-3v6pmi
3 Respuestas
Responde la pregunta0
Actualice el estado fxChoices considerándolo como una matriz multidimensional. Consulte el código-sandbox aquí .
Intente establecer el estado como el valor de cada menú desplegable. No use el menú desplegable solo para cambiar el estado, utilícelo para ver el estado real que ha establecido.
0
Organice su componente como se muestra a continuación. Ahora solo es cuestión de cambiar NUMER_OF_INPUTS tantas entradas como desee.
const NUMER_OF_INPUTS = 2; function App() { const [fxChoices, setFxChoices] = React.useState( Array.from({ length: NUMER_OF_INPUTS }).map(() => [[]]) ); console.log("fxChoices", fxChoices); const onChangeHandler = (compIndex, optionIndex, option) => { setFxChoices((prevState) => prevState.map((item, itemIndex) => { if (itemIndex === compIndex) { const copyItem = [...item]; copyItem[optionIndex] = option; return copyItem; } return item; }) ); }; return ( <div className="App"> {Array.from({ length: NUMER_OF_INPUTS }).map((_, j) => { return ( <div key={j}> <p>bus{j + 1}</p> <SelectComponent compIndex={j} onChangeHandler={onChangeHandler} /> </div> ); })} </div> ); } const SelectComponent = ({ onChangeHandler, compIndex }) => { return Array.from({ length: 2 }).map((_, i) => ( <div key={i} style={{ display: "flex", flexDirection: "column" }}> <select onChange={(e) => { onChangeHandler(compIndex, i, e.target.value); }} className="effect-select" > <option value={`bs${i + 1}-fx${i + 1}`}>{`FX${i + 1}`}</option> <option value="reverb">Reverb</option> <option value="delay">Delay</option> <option value="chorus">Chorus</option> <option value="chebyshev">Chebyshev</option> <option value="pitch-shift">PitchShift</option> <option value="compressor">Compressor</option> </select> </div> )); }; ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>NOTA: Trate de pensar como construir cajas cuando diseñe componentes.
0
Tal vez sea más fácil mapear su matriz multidimensional para acceder a los índices fácilmente como se muestra a continuación
import { useState } from "react"; import "./styles.css"; export default function App() { const Options = () => { const [fxChoices, setFxChoices] = useState([...Array(2)].map(() => [...Array(2)].map(() => null))); console.log(fxChoices) return (<> {fxChoices.map((item, i) => ( <div key={i}> <p>bus{i + 1}</p> <div style={{ display: "flex", flexDirection: "column" }}> {item.map((_, index) => <select onChange={(e) => { fxChoices[i][index] = e.target.value setFxChoices(fxChoices); console.log("fxChoices", fxChoices); }} className="effect-select" > <option value={`bs${i + 1}-fx${i + 1}`}>{`FX${i + 1}`}</option> <option value="reverb">Reverb</option> <option value="delay">Delay</option> <option value="chorus">Chorus</option> <option value="chebyshev">Chebyshev</option> <option value="pitch-shift">PitchShift</option> <option value="compressor">Compressor</option> </select>)} </div> </div> )) } </> ); }; return ( <div className="App"> <Options /> </div> ); }