React Final Form - 单选按钮在 FieldArray 中不起作用

Question

我有使用 FieldArray 动态呈现的单选按钮组。

<FieldArray name="customers">
    {({ fields }) =>
    fields.map((name, index) => (
        <div key={name}>
        <label>Cust. #{index + 1}</label>
        <label>
            <Field
                name="picked"
                component="input"
                type="radio"
                value={index + 100}
            />{" "}
            Pick {index + 100}
        </label>

单击单选按钮会更新表单值，但未在 UI 中选择该按钮。 我很好奇这里缺少什么。

{
  "customers": [
    {
      "firstName": "first_name_1",
      "lastName": "last_name_1"
    },
    {
      "firstName": "first_name_2",
      "lastName": "last_name_2"
    }
  ],
  "picked": "101"
}

完整代码在这里： https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-r7uz8y?file=/index.js:1482-1995

示例基于https://final-form.org/docs/react-final-form/examples#field-arrays

感谢您的观看！

Answer 1

我读过文档说值可以是任何变量。 但我测试了一个字符串值（例如： <Field name="radio" type="radio" value="no" component="input" />No 。它正在工作。所以如果你添加了一个 integer 值，它' d not work expected. 如果你用这个value={JSON.stringify(index + 100)}转换它会起作用。

https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-forked-41lwoc

Answer 2

@ht13 给个解决办法，不错。 我想说渲染后的值应该是“string”。 您可以将值作为 integer 传递。实际上，浏览器应该显示错误，但有时它会修复或识别它。