При создании формы в React .map () неправильно заполняет параметры select>, но работает для обычного div - PullRequest
Новая
       1

При создании формы в React .map () неправильно заполняет параметры select>, но работает для обычного div

2 голосов
/ 28 мая 2020

Я использую 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,
      };

1 Ответ

1 голос
/ 28 мая 2020
Тег

<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>
...