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

Question

假设我有一个名为 response 的状态变量，它包含一个动态 API 响应，它的值用作选项标签中的下拉选项。我想要做的是将选项值的顶部设置为另一个名为 selectedOption 的状态变量作为默认值。之后，我将使用它进行另一个 API 调用。这是我正在谈论的片段。

// 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 而无需打开下拉菜单并单击它？

Answer 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>

Answer 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>

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

Set the Top of the Option Element as a Default Value

html

jsx

reactjs

react-functional-component