除非先选择另一个选项，否则选择元素的第一个选项不起作用答案

【问题标题】：First Option of Select Element Not Working Unless Another Option Is Selected First除非先选择另一个选项，否则选择元素的第一个选项不起作用
【发布时间】：2021-12-09 10:20:24
【问题描述】：

<select value={author} onChange={({ target }) => setAuthor(target.value)} >
          {authors.map(author => 
            <option key={author.name} value={author.name}>
              {author.name}
            </option>)}
        </select>

这是在 React/NodeJS 中。一切都按预期工作，默认显示第一个选项/author.name。但是，它没有被设置为 React 状态的默认值，并且单击下拉菜单然后选择它不会改变这一点。如果选择了另一个选项，然后您选择了第一个选项，它将按预期工作。

【问题讨论】：

stackoverflow.com/a/44787318/4546364
可能您在选择中设置的值不等于任何选项。我注意到选项将作者姓名作为值，但您实际上使用了整个作者对象作为选择元素的值。您作为选择值传递的作者表达式是表示名称的字符串吗？是否有与该名称具有相同值的选项？
尝试控制台记录作者表达式的值和渲染方法中每个选项的值。第一次执行渲染时，我希望作者表达式的值不等于任何选项值。这就是为什么 select 元素没有您期望的初始值并且选择了第一个选项。

标签： javascript reactjs

【解决方案1】：

第一次需要手动设置状态（本例中为作者），因为onChange事件只有在你改变选中的选项时才会触发，所以加载时不会设置状态。你有两个选择：

如果作者事先知道，您可以使用：

const [author,setAuthor] = useState(authors[0].name)

如果您异步加载作者，您可以等待它们加载，然后使用 useEffect 设置作者：

useEffect(()=>{
if(authors && authors.length>0){
setAuthor(authors[0].name);
},[authors])

【讨论】：