React Hooks＆lt; select＆gt;＆lt; option＆gt; gt; 2个下拉问题

Question

我是新手反应钩子。已经创建了一个小型的两滴应用程序。第二个下拉（DD）内容是根据第一个DD的选择填充的。我在此处发布的代码具有第一个DD显示A，B，C，D和第二个DD显示A1 -A3或B1 -B3等，具体取决于选择。

首次通过，一切都按预期工作。小故障发生在更改第一个DD中的值后显示第二个DD中的列表。示例：最初在第一个DD中选择“ A”，然后在第二个DD中选择“ A3”。然后回到第一个DD，然后选择“ B”。现在显示为“ B1 -B4”，但在顶部显示“ B3”。我希望在更改第一个DD选择后每次都在顶部显示最初的空白选项。

我花了几个小时研究这个。香草JS版本正常，所以我假设这是我对React甚至钩子缺少的东西？根据So和其他Web文章，我尝试使DDS成为“受控组件”，并使用了Select元素等上所选的，值和默认属性的多个变体，等等。它都没有修复此故障。

请提前感谢所有可以帮助我了解如何解决此问题的人！

链接到codesandbox.io演示： https：//codesandbox.io/s/patient-wood-wood-wood-0op9uuu

下面的代码：

import React, { useEffect, useState } from 'react';
import './App.css';

function Test_1() {
  const [DD1, setDD1] = useState([]);
  const [DD2, setDD2] = useState([]);
  useEffect(() => { }, [DD2]);

  const dd_data_1 = ["a", "b", "c"];
  const dd_data_2 = [{name: "a", content: "a1"}, {name: "a", content: "a2"}, {name: "a", content: "a3"},
                     {name: "b", content: "b1"}, {name: "b", content: "b2"}, {name: "b", content: "b3"},
                     {name: "c", content: "c1"}, {name: "c", content: "c2"}, {name: "c", content: "c3"}];

 const zz = (e) => {
    let foo = dd_data_2.filter(x => x.name === e.target.value);
    setDD2(foo);
 };

return (
<div id="main">

<select name="dd_1" id="dd_1" onChange={zz} >
  <option value=""></option>
  {dd_data_1.map((x, i) => (
    <option key={i} value={x}>{x}</option>
   ))}
</select>

<select name="dd_2" id="dd_2">
    <option value=""></option>
    {DD2.map((x, i) => (
       <option key={i} value={x.content}>{x.content}</option> 
    ))}
 </select>
</div>
)}

export default Test_1;

Answer 1

它不起作用，因为您设置了键 index dd2数组的索引，

{DD2.map((x, i) => (
   <option key={i} value={x.content}>{x.content}</option> 
))}

因此当您的DD2数组更改时，该选项仍然相同，因为它具有相同的键。因此，只需将您的钥匙更改为独特的内容即可识别列表中的项目

{DD2.map((x, i) => (
     <option key={x.content} value={x.content}>
         {x.content}
     </option>
))}