动态生成选项时如何使默认值在选择上起作用？ [复制]答案

【问题标题】：How to make defaultValue work on select when options are generated dinamically? [duplicate]动态生成选项时如何使默认值在选择上起作用？ [复制]
【发布时间】：2021-09-08 06:59:44
【问题描述】：

我有一个选择，它的选项是在一个函数上生成的，我想在 defaultValue 上设置一个值，并默认选择这个值的选项，但这不是它的工作方式现在。我已经在这个 CodeSandbox 上复制了这个问题：CodeSandbox。

我还在屏幕上显示模拟数据，以便您检查它应该选择哪个人。在代码中，我将默认值设置为 defaultValue={3}，因此我希望选择 id 为“3”的用户。

这是无法访问代码框的人的代码：

import "./styles.css";
import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetch = async () => {
      let result = await getUsers();
      setUsers(
        result.map((r, index) => {
          let temp = r;
          temp["idd"] = index;
          return temp;
        })
      );
    };

    fetch();
  }, []);

  const generateOptions = () => {
    let aux = users.map((u, key) => {
      return (
        <option key={key} value={u.idd}>
          {u.name.first}
        </option>
      );
    });
  
    return aux;
  };

  const getUsers = async () => {
    let data = [];
    await axios
      .get("https://randomuser.me/api/?results=10", {
        headers: {
          "Content-type": "application/json"
        }
      })
      .then((r) => {
        data = r.data.results;
      });
    return data;
  };

  return (
    <>
      {users ? (
        <>
          <div className="App">
            <select defaultValue={3}>{generateOptions()}</select>
          </div>
        </>
      ) : (
        <div>loading...</div>
      )}
    </>
  );
};

export default App;

【问题讨论】：

可以给option项添加“selected”属性，或者使用selectElement.value = [value of option to select]
你需要这样设置<option selected="selected">。请检查此stackoverflow.com/questions/3518002/…
@ControlAltDel 向选项添加属性对我不起作用，生成选项的函数应该是通用的并且适用于所有类型的项目，所以我只需要更改 defaultValue在选择元素上。关于 selectElement.value，我想这可以工作，但为什么它不能与 defaultValue 一起工作？
@Samir 在某种程度上是的，但是在我的脑海中，我想不出如何实现这个generateOptions 函数，使其适用于不同类型的对象使用option 元素上的属性

标签： javascript html reactjs

【解决方案1】：

问题似乎是选择组件需要重新渲染。如果您将users.length 的键添加到select，它会强制它重新渲染和工作

https://codesandbox.io/s/recursing-lake-j9h1y?file=/src/App.js

【讨论】：

还是不行，除非我搞砸了
更新了答案