React结合react-bootstrap存储足球比赛预测数组的问题

问题核心诱因 #

所有主客场得分输入最终仅返回单个对象，本质是没有为每场比赛的输入项做独立的字段状态绑定：所有输入框共享了同一个home_score/away_score状态键，后输入的内容会直接覆盖先前的值，无法生成逐场独立的预测数据对象。

分步排查与修复 #

• 给每场比赛的表单字段增加唯一标识绑定
  遍历比赛数组渲染输入框时，不要直接使用通用的home_score、away_score作为字段名，需要关联对应比赛的唯一ID或数组循环索引，避免字段名冲突导致的覆盖。
  以antd表单为例，正确的字段绑定格式为：

  {matchArray.map((match, index) => (
    <div key={match.id}>
      <p>{match.homeTeam} 对阵 {match.awayTeam}</p>
      {/* 字段名通过数组层级指定，关联当前循环的索引位置 */}
      <Form.Item name={['predictList', index, 'homeScore']}>
        <InputNumber min={0} precision={0} />
      </Form.Item>
      <Form.Item name={['predictList', index, 'awayScore']}>
        <InputNumber min={0} precision={0} />
      </Form.Item>
    </div>
  ))}
  

  这种绑定方式下，antd会自动按照name的数组层级生成嵌套数据结构，调用form.getFieldsValue()获取的predictList字段会直接是包含逐场预测对象的数组，不需要额外手动拼接数据。
• 手动状态更新的校验逻辑
  如果没有使用antd表单的自动状态管理，是通过immer手动维护预测数据状态，需要注意更新时的定位逻辑：
  • 错误写法：每次输入直接覆盖整个状态对象

    // 所有输入都写入同一个全局字段，必然出现值覆盖
    setPredictData(draft => {
      draft.home_score = inputValue
    })
    

  • 正确写法：根据当前输入对应比赛的数组索引，定位到状态中对应的节点做更新

    // 定位到当前比赛的对应字段更新，不影响其他比赛的预测值
    setPredictData(draft => {
      draft[matchIndex].home_score = inputValue
    })
    

• 初始值结构对齐
  初始化预测状态时，要提前按照比赛数组的长度生成等长的空对象数组，结构类似Array(matchArray.length).fill({homeScore: null, awayScore: null})，避免渲染时因为状态节点不存在导致的字段绑定失效。

内容的提问来源于stack exchange，提问作者Drescky