Question

我正在使用Formik在我的表单中使用React-Select。我有以下对象数组，这些对象来自API，并通过它进行映射，以便将数据转换为React-select所需的格式。

这里是我提供给选择的数据数组的映射。

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

它有一对label和value。就像react-select想要的那样。但是在我的Formik HOC中，我将数据属性（例如，分组）的值的PropType设置为字符串，因为服务器应该给我并接收唯一的字符串。

这是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>
)

您对如何解决此问题有任何想法吗？

ReactJS |失败的道具类型期望字符串改为获取对象

0 个答案: