将选项元素的顶部设置为默认值答案

【问题标题】：Set the Top of the Option Element as a Default Value将选项元素的顶部设置为默认值
【发布时间】：2021-03-18 07:31:45
【问题描述】：

假设我有一个名为 response 的状态变量，它包含一个动态 API 响应，其值用作选项标签中的下拉选项。我要做的是将选项值的顶部设置为另一个名为selectedOption 的状态变量作为默认值。之后，我将使用它来进行另一个 API 调用。这就是我所说的 sn-p。

// response = useState([]) <- contains an api response
// selectedOption = useState('') 
// response -> recordset = [{name: 'John'}, {name: 'Mary'}, {name 'Michael'}] *These objects vary depending on an api call. 



<select onChange={(e) => setselectedOption(e.target.value)>
  {response?.recordset?.map((obj, key) => {
    return <option key={key} value={obj.name}>{obj.name}</option>
  })}
</select>

上述情况，John 显示在下拉列表的顶部。但是，selectedOption 为空。打开下拉列表并单击任何选项后，selectedOption 将使用所选值进行更新。有什么方法可以在不打开下拉列表并单击它的情况下将 John 设置为 selectedOption？

【问题讨论】：

标签： html reactjs jsx react-functional-component

【解决方案1】：

由于您在 <option/> 映射中迭代数组 response.recordset，因此只需使用初始状态的第一项

const [response] = useState([]); // <- contains an api response
//response -> recordset = [{name: 'John'}, {name: 'Mary'}, {name 'Michael'}] // *These objects vary depending on an api call.
const [selectedOption] = useState( response.recordset[0] );
                           // This bit here --^

<select onChange={(e) => setselectedOption(e.target.value)>
  {response?.recordset?.map((obj, key) => {
    return <option key={key} value={obj.name}>{obj.name}</option>
  })}
</select>

如果由于您的 useEffect 是异步的而无法执行此操作，请在 API 响应后立即设置 selectedOption，我将包含一个空选项。

const [response, setResponse] = useState([]); // <- contains an api response
const [selectedOption, setSelectedOption] = useState('');

useEffect(() => {
  // your fetch
  // response -> recordset = [{name: 'John'}, {name: 'Mary'}, {name 'Michael'}] *These objects vary depending on an api call. 
  setResponse(response);
  setSelectedOption(response.recordset[0]);
},[])


<select onChange={(e) => setselectedOption(e.target.value)>
  <option value="">Please select something below</option>
  {response?.recordset?.map((obj, key) => {
    return <option key={key} value={obj.name}>{obj.name}</option>
  })}
</select>

【讨论】：

感谢您的回答。您提供的第二个解决方案非常有效！

【解决方案2】：

如果response 是一个数组，您可以在每次迭代中访问您的对象，也就是说，您可以只使用resopnse.map() 而不是response.recordset.map

您还需要使用setSelectedOption 来更新您的状态变量。这是useState 提供的自定义命名函数。

至于选择第一个元素，在第一个选项中添加selected属性。

[response, setResponse] = useState([])
[selectedOption, setSelectedOption] = useState('') 

<select onChange={(e) => setSelectedOption(e.target.value)>
  {response.map((obj, key) => {
    return <option key={key} value={obj.name} selected={key === 0}>{obj.name}</option>
  })}
</select>

【讨论】：