ReactJS | Неудачный проп-тип Ожидаемая строка получила объект вместо - PullRequest
Новая
       25

ReactJS | Неудачный проп-тип Ожидаемая строка получила объект вместо

0 голосов
/ 19 марта 2019

Я использую React-Select в своей форме с Formik. У меня есть следующий массив объектов, который исходит из API и который я отображаю через него, чтобы преобразовать данные в формат React-select хочет.

Вот преобразованный массив данных, которые я предоставляю селекту. 

[ { "label": "picard", "value": "picard" }, { "label": "riker", "value": "riker" } ]

Имеет пару label и value. Точно так же, как реагировать-выберите хотите. Но в моем Formik HOC у меня есть PropType для значений свойства данных (например, groups), чтобы быть строкой, как и должно быть, поскольку сервер будет давать мне и получать уникальные строки.

Вот тип PropType: 

      values: PropTypes.shape({
        useraname: PropTypes.string,
        email: PropTypes.string,
        password: PropTypes.string,
        confirmPassword: PropTypes.string,
        group: PropTypes.string
      }),

По этой причине, каждый раз, когда я пытаюсь выбрать элемент из выпадающего списка, я получаю это: 

checkPropTypes.js:19 Warning: Failed prop type: Invalid prop `values.group` of type `object` supplied to `AddEditUser`, expected `string`.

Вот элемент select и функция отображения: 

  mapListGroupToSelect = () => {
    const { groups } = this.state;
    return groups.map(group => ({
      label: group.name,
      value: group.name
    }));
  };

  const groups = this.mapListGroupToSelect();

  return (
          <div className="pt-2">
            <label className="font-weight-bold">
              Select Group <Asterisk />
            </label>
            <Select
              placeholder="Select a Group (Just One)"
              onChangeCallback={handleChange}
              type="simpleSelect"
              options={groups}
              isMulti={false}
              id="group"
              onChange={options => setFieldValue('group', options)}
            />
            {JSON.stringify(groups, null, 2)}
            <ErrorMessage name="group" component="div" className="text-danger" />
          </div>
)

У вас есть идеи, как решить эту проблему?

...