Html select标记上的默认值存在问题

尝试在react组件中的select标记上设置默认值，但无法使其正常工作：

const ComboBox = (props) => {
  const options = [
    { id: 1, value: "SHOES" },
    { id: 2, value: "SOCKS" },
    { id: 3, value: "SHIRTS" },
    { id: 4, value: "BELTS" }
  ];
  return (
    <React.Fragment>
      <label htmlFor={props.id}>{props.label}</label>
      <select id={props.id} value={props.selected} onChange={props.changeHandler}>
        {options.map((row, ndx) => (
          <option key={ndx} value={row.id}>{row.value}</option>
        ))}
      </select>
    </React.Fragment>
  );
};

const组合框=（道具）=>{
常量选项=[
{id:1，值：“SHOES”}，
{id:2，值：“SOCKS”}，
{id:3，值：“SHIRTS”}，
{id:4，值：“皮带”}
];
返回(
{props.label}
{options.map（（行，ndx）=>(
{row.value}
))}
);
};

始终选择列表中的第一个选项

---

这里提供了一个行为示例：

请替换下面的代码。使用value={props.value}未选择props.selected

<select
        id={props.id}
        value={props.value}
        onChange={props.changeHandler}
      >
        {options.map((row, ndx) => (
          <option key={ndx} disable={ndx === 0 ? "true" : false} value={row.id}>
            {row.value}
          </option>
        ))}
      </select>

{options.map（（行，ndx）=>(
{row.value}
))}

您正在尝试将默认值设置为1，然后可以使用react中的usestate执行此操作。 这是代码

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

const ComboBox = (props) => {
  const options = [
    { id: 1, value: "SHOES" },
    { id: 2, value: "SOCKS" },
    { id: 3, value: "SHIRTS" },
    { id: 4, value: "BELTS" }
  ];
  return (
    <React.Fragment>
      <label htmlFor={props.id}>{props.label}</label>
      <select id={props.id} value={props.value} onChange={props.changeHandler}>
        {options.map((row, ndx) => (
          <option key={ndx} value={row.id}>
            {row.value}
          </option>
        ))}
      </select>
    </React.Fragment>
  );
};
export default function App() {
  const [selectedValue, setSelectedValue] = useState(1);
  const comboHandler = (e) => setSelectedValue(e.target.value);
  return (
    <div className="App">
      <ComboBox
        id="test"
        name="test"
        value={selectedValue}
        changeHandler={comboHandler}
      ></ComboBox>
      <div>
        <h2>Value Should Be {selectedValue}</h2>
      </div>
    </div>
  );
}

---

您可以更改useState（此处）中的值，使其成为默认的选定值。

您的代码没有任何意义。可能会添加一个解释和一个代码沙盒？从父组件传递的值道具中传递的数据不在所选道具中。他只是错过了正确的道具名称。我确实错误地命名了道具，并修复了代码沙盒中选项为常量的问题。尝试使用fetch从服务器调用填充数据不起作用；然而我应该把它作为一个单独的问题发布吗？如果你把实际的代码与useffect放在一起会更好。因此，我们可以更好地理解和解决确切的情况。实际上，我刚刚弄清了问题所在。在我的

changeHandler

-我是id的上框；因此，它们与“我的选择”中的选项id不匹配。谢谢大家的帮助！我知道这没有什么区别，但最好使用option.id而不是index作为键。

const [selectedValue, setSelectedValue] = useState(1);