Javascript / React - 如何使用 forEach 循环内的“select”输入值更新多维数组的值？

Question

我正在尝试使用 forEach 循环内的select输入的值更新多维数组的值。 它是一个包含两个内部数组的数组。 每次我使用select输入更改值时，两个内部数组都会更新。 如何让内部数组单独更新？ 代码沙盒 - https://codesandbox.io/s/multidimensional-array-3v6pmi

Answer 1

更新状态fxChoices将其视为多维数组。 请参考 这里的代码沙箱。

尝试将状态设置为每个下拉列表的值。 不要只使用下拉菜单来更改状态，而是使用它来查看您设置的实际状态。

Answer 2

像下面这样组织你的组件。 现在只需更改NUMER_OF_INPUTS的输入数量即可。

 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>

注意：在设计组件时尝试像构建盒子一样思考。

Answer 3

也许更容易映射您的多维数组以轻松访问索引，如下所示

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