Я использую реагирующие хуки для небольшого проекта musi c, над которым я работаю. Как я могу изменить состояние только в затронутом div?

Question

Я планирую 4 деления. Они печатаются так, как я хочу, каждый div показывает свой соответствующий номер в h2 и аккорд по умолчанию 'C'.

У меня выпадающий список с опциями AG. Я хочу, чтобы h1 изменил аккорд на новый аккорд только в том диве, в котором он был выбран.

Аккорд меняется, но во всех div. Как мне сделать так, чтобы состояние менялось только для этого конкретного div? Это возможно? Я знаю, что мог бы написать отдельное состояние для каждого div, только четыре, но я хочу, чтобы это было чище, чем это, если это возможно. Любые идеи? Я уверен, что большинство из вас смогут сразу определить проблему. Заранее спасибо за помощь.

    function Grid() {
      const [chord, setChord] = useState("C");

     const number = [1, 2, 3, 4]

      return (
        number.map(number =>
      <div style={left}>

        <div style={styles} className="col-">
          <h1 style={keyStyle}>{chord}</h1>
          <h2 key={number}>{number.toString()}.</h2>

          <label for="key">KEY </label>

          <select
            style={dropdownStyles}

            onChange={e => setChord(e.target.value)}

          >
            <option value="C">C</option>
            <option value="dm">dm</option>
            <option value="em">em</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="am">am</option>
          </select>
        </div>
      </div>


    )

  );
}

Answer 1

Вам необходимо инициализировать ваше состояние с помощью массива вместо одного строкового значения следующим образом:

function Grid() {
      // Initialize an Array state with 4 entries for each div: 
      const [chord, setChord] = React.useState(["C","C","C","C"]);
     // Rename list to 'numbers'. Naming matters.
     const numbers = [1, 2, 3, 4];
      return (
        numbers.map((number,idx) =>
      <div style={left}>
        <div style={styles} className="col-">
          {/* Use the current div's number, minus 1 to display the appropriate state value */}
          <h1 style={keyStyle}>{ chord[idx] }</h1>
          <h2 key={number}>{number.toString()}.</h2>
          <label for="key">KEY </label>
          {/* Update the state using the current div's number: */}
          <select
            style={dropdownStyles}
            onChange={e => {
                            // Get a copy of the current state:
                            const _chord = chord.slice();
                            // Change the entry for the specified div:
                            _chord[idx] = e.target.value;
                            // Update the state:
                            setChord(  _chord );
                        }}
          >
            <option value="C">C</option>
            <option value="dm">dm</option>
            <option value="em">em</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="am">am</option>
          </select>
        </div>
      </div>
    )
  );
}

Вы также можете использовать оператор spread, чтобы получить копию массива аккордов внутри обработчики событий:

const _chord = [ ...chord ];

---

Примечание: Вы также должны рассмотреть вопрос о переименовании массива number в numbers (список элементов требует множественного числа) или вы будете искать для проблем, так как вы также используете number внутри обратного вызова карты. Убедитесь, что два имени соответствуют разным значениям.