[InputNumber] useFieldArrayのprependでコントロールを追加すると不正な動作になる – MESCIUS ナレッジベース

作成日: 2022/09/29 最終更新日: 2022/10/21

文書種別

制限事項

状況

回避方法あり

詳細

React-Hook-Form useFieldArrayのprependを利用してコントロールを追加した場合、追加後の値変更に合わせて新規追加されたコントロールの値も同時に変更されてしまいます。

回避方法

keyの値を以下のように変更してください。

{fields.map((field, index) => (
    // keyの値を以下のようにします。
    // <tr key={field.id} style={{ marginBottom: '8px' }}>
    <tr key={'_' + field.id + '_' + index} style={{ marginBottom: '8px' }}>
        <td>{index + 1}</td>
        <td><WJInput name={`test.${index}.wjinput`} /></td>
        <td><Input name={`test.${index}.input`} /></td>
    </tr>
))}