如何将数组值传递给 Formik 选择

Question

我将 Formik 用于我的应用程序中的一堆管理控制台表单。到目前为止，我还没有这个用例。

我的 Formik 表单使用 2 个自定义组件之一，Myinputtext（输入框）或 MySelect（下拉）。到目前为止，我不需要任何其他组件。这是我的 Myselect 组件的外观。

const MySelect = ({ label, ...props }) => {
    const [field, meta] = useField(props);
      return (
      <div>
        <label htmlFor={props.id || props.name}>{label}</label>
        <select className={props.className} {...field} {...props}  />
        {meta.touched && meta.error ? (
          <div className="error">{meta.error}</div>
        ) : null}
      </div>
    );
  };

在表单中我像这样将值传递给这个组件

<MySelect className="select-input" label="Losing Player" name="losingPlayer">
                          <option value="">Select Losing Player</option>
                          <option value="player1">{state.Player1Name}  </option>
                          <option value="player2">{state.Player2Name}  </option>

所有这些都适用于我迄今为止构建的一些表单。现在在第四种形式中，从后端返回的数据以数组的形式出现，我试图将数组作为输入传递给 myselect 组件

<MySelect className="select-input" label="Losing Player" name="losingPlayer">
                              <option value="">Select Losing Player</option>
                              <option value="player1">{name of array object}  </option>

这是失败的并且没有提供正确的结果。

在 formik 官方文档中，它说有一种方法可以处理这样的数组对象

<Form>
         <Field name="friends[0]" />
         <Field name="friends[1]" />
         <button type="submit">Submit</button>
       </Form>
     </Formik>

但是我的数组大小可以是动态的，我不能像上面那样硬编码，0,1。

我尝试像这样在 select 组件中渲染数组，

    <MySelect className="select-input" label="Winning Player" name="winningPlayer"> 
{props.initialValues.map((player) => { 
<option key={player} value={player}> {player} </option> })} </MySelect>

这不会引发任何错误。但下拉菜单显示为空。

我基本上希望将数组中的名称显示为下拉列表。解决这个问题的正确解决方案是什么？

这终于奏效了：-

return (
      <div>
        <label htmlFor={props.id || props.name}>{label}</label>
        {!props.player ? <select className={props.className} {...field} {...props}  /> 
        : 
        <select className={props.className}>
           {props.player.map((player) => {
               return (
                   <option key={player} value={player}>
                       {player} 
                   </option>
               )
           })} 
         </select>
        }
        {meta.touched && meta.error ? (
          <div className="error">{meta.error}</div>
        ) : null}
      </div>

Answer 1

你需要像这样在你的选择中映射你的数组和渲染选项：

{options?.map(({ value }) => (
  <option key={value} value={value}>
    {value}
  </option>
 ))}