时间戳

首页 > 解决方案 > 在 React 中创建表单时 .map() 不会正确填充选择 > 选项，但适用于普通 div

javascript - 在 React 中创建表单时 .map() 不会正确填充选择 > 选项，但适用于普通 div

问题描述

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

当我.map()在标准 div 中使用时，结果列表输出正确。这是代码：

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

然后，当我尝试在选择/选项下拉列表中映射相同的数据时，它只会呈现第一个结果。即没有下拉菜单。这是这段代码：

<select
          value={categoryName}
          onChange={(e) => setCategoryName(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>
            ))}

这是 github gist 中组件的完整代码

提前感谢您提供的任何其他见解。

编辑添加动作和减速器：

 export const getCategories = () => async (dispatch) => {
  try {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };
    const res = await axios.get(
      "http://localhost:5000/category/getallcategories",
      config
    );

    dispatch({
      type: GET_CATEGORIES,
      payload: res.data,
    });
    console.log("2222" + res.data);
  } catch (err) {
    dispatch({
      type: CATEGORY_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

和减速机：

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

标签： javascriptreactjsreact-redux

解决方案

<select>标签应包含该值。在您的情况下，它是状态：taskTitle. Onchange 也应该处于选中状态。在您的代码中，您使用此 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>

推荐阅读