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

Posted 2023-02-21

【中文标题】动态生成选项时如何使默认值在选择上起作用？ [复制]

【英文标题】：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">。请检查此***.com/questions/3518002/…

@ControlAltDel 向选项添加属性对我不起作用，生成选项的函数应该是通用的并且适用于所有类型的项目，所以我只需要更改 defaultValue在选择元素上。关于 selectElement.value，我想这可以工作，但为什么它不能与 defaultValue 一起工作？

@Samir 在某种程度上是的，但是在我的脑海中，我想不出如何实现这个generateOptions 函数，使其适用于不同类型的对象使用option 元素上的属性

【参考方案1】：

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

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

【讨论】：

还是不行，除非我搞砸了

更新了答案