Javascript 在React.map（）中创建表单时，不会填充select>；选项正确，但适用于普通div

我正在使用React（和Redux），并且有一个表单，我需要通过API调用用数据填充下拉列表

当我在标准div中使用

.map（）

时，结果输出列表是正确的。代码如下：

<div>
  {categories &&
    categories.map((category, i) => (
      <option
        key={i}
        label={category.categoryName}
        value={category._id}
        name={category.categoryName}
        category={category}
      >
        {category.categoryName}
      </option>
    ))}
</div>

和减速器：

    export default function (state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case GET_CATEGORIES:
      return {
        ...state,
        categories: payload,
        loading: false,
      };

标记应包含该值。在您的情况下，状态是：

tasktTitle

。Onchange也应该在select下。 在代码中使用此useState：

const [taskTitle, setTaskTitle] = useState("");

因此，请尝试将“选择”更改为：

<select 
   value={taskTitle}
   onChange={(e) => setTaskTitle(e.target.value)}>
      {categories &&
      categories.map((category, i) => (
         <option
            key={i}
            label={category.categoryName}
            value={category._id}
            name={category.categoryName}
            category={category}
         >
           {category.categoryName}
         </option>
       ))}
</select>

setTaskTitle（e.target.value）}>
{类别&&
categories.map（（categories，i）=>(
{category.categoryName}
))}

您需要在选择中写入onChange。但它仍然应该表现出来。看看这个。你能在这里重现你的问题吗？@AjeetShah谢谢你整理代码。我在我的机器上进行了本地复制。当我硬编码的类别，我得到的下拉菜单工作正常。当我尝试通过API调用类别时，下拉列表中只填充第一个值。@AjeetShah再次感谢。我在代码中添加了操作和Redux的reducer。这是否更能说明我错在哪里了？Hi@AjeetShah它打印：2222[object object]，[object object]，[object object object]，[object object]，[object object object]，[object object object]，[object object object]，[object object object object]，[object object object object object]它调用的控制器是：exports.getAllCategories=asynchHandler（async（req{const categories=wait categority.find（{user:req.user.id，}）。填充（“任务”）；res.json（categories）；}）；Hi Ajeet&Roman感谢您的帮助。我尝试了上述方法，但不幸没有成功。但我确实注意到了原始代码中的另一个问题，因为我调用的是setTaskTitle，而不是setCategoryName。在我以前的一些代码中，这是正确的，但在我提供的示例中没有。我用最新的代码更新了我的问题和要点。我仍然可以无法使用下拉列表填充所有结果。这可能是API请求返回的数据的结构问题吗？再次感谢Paul

const [taskTitle, setTaskTitle] = useState("");

<select 
   value={taskTitle}
   onChange={(e) => setTaskTitle(e.target.value)}>
      {categories &&
      categories.map((category, i) => (
         <option
            key={i}
            label={category.categoryName}
            value={category._id}
            name={category.categoryName}
            category={category}
         >
           {category.categoryName}
         </option>
       ))}
</select>