时间戳

首页 > 解决方案 > currentValue.indexOf 不是 Formik 中 getValueForCheckbox 的函数

reactjs - currentValue.indexOf 不是 Formik 中 getValueForCheckbox 的函数

问题描述

我正在尝试使用 formik 构建一个组复选框组件，如 复选框组的照片表中

我的复选框组件代码是：

const CheckBox = ({ children, ...props }) => {
  const [field, meta] = useField({ ...props, type: "checkbox" });
  return (
    <>
      <label className="form-check-label">
        <input type="checkbox" {...field} {...props} />
        {children}
      </label>
      {meta.touched && meta.error ? (
        <div className="text text-danger">{meta.error}</div>
      ) : null}
    </>
  );
};

这是复选框组的实现：

                <thead className="thead-light">
                  <tr>
                    <th scope="col">#</th>
                    {data.periods
                      ? data.periods.map((time, index) => (
                          <th scope="col" key={index}>
                            {time[0]}
                          </th>
                        ))
                      : null}
                  </tr>
                </thead>
                <tbody>
                  {data.day_of_week
                    ? data.day_of_week.map((day, index) => (
                        <tr key={index}>
                          <th scop="row">{day[1]}</th>
                          {data.periods
                            ? data.periods.map((time, index) => (
                                <td key={index}>
                                  <CheckBox
                                    name="acceptedTime"
                                    key={index}
                                    value={time[0]}
                                  />
                                </td>
                              ))
                            : null}
                        </tr>
                      ))
                    : null}
                </tbody>
              </table>

当我单击这些复选框中的每一个时，我都会收到错误消息currentValue.indexOf is not a function。

非常感谢你的帮助

标签： reactjscheckboxformik

解决方案

我们看不到您的“数据”，这会很有帮助，但简而言之，您用于表单的库期望 indexOf() 可以处理复选框的值，但事实并非如此。

编写代码是为了建议“数据”有一个 day_of_week 数组和一个 period 数组，并且 period 数组项本身是可迭代的（即数组、字符串等），每个至少有一个值。当你在那里写 [0] 时，你承诺它至少有一个值。并且您正在使用的表单库还期望该值将具有 indexOf 属性，如果它是字符串或数组，它将自动出现。

我怀疑time指向periods数组中每个项目的 是未定义的，或者是空数组或字符串，或者它是某种类型，在它上面说 [0] 是没有意义的。如果它确实有意义，那么它在那里（在 time[0] 时）可能是未定义的。

推荐阅读