我正在为我正在从事的一个小音乐项目使用反应钩子。如何仅在受影响的 div 中进行状态更改？

Question

我正在映射4个div。它们像我想要的那样打印出来，每个div在h2和默认和弦"C"中显示相应的数字。

我有一个选项a-G的下拉列表。我希望h1只在它选择的div中将和弦更改为新和弦。

和弦确实发生了变化，但在所有的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。确保这两个名称对应不同的值。