输入状态的最佳实践 - 反应

Question

我正在处理具有多个输入的组件。每个列表项目都是“匹配”，每场比赛有2个输入，您可以存储两个团队的目标。该输入是从地图中渲染的：

return (
    <div>
      <ul>
        {groupA &&
          groupA.map((match) => (
            <li key={match.id} className="matches">
              <img
                className="home-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.homeTeam.id)[0]
                    .crestUrl
                }`}
              />
              {match.homeTeam.name}
              <input
                onChange={(e) =>
                  setGoalHome({
                    match: match.id,
                    home: match.homeTeam.name,
                    goalHome: e.target.value,
                  })
                }
              />
              vs
              {match.awayTeam.name}
              <input onChange={(e) => setGoalAway(e.target.value)} />
              <img
                className="away-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.awayTeam.id)[0]
                    .crestUrl
                }`}
              />
            </li>
          ))}
      </ul>
      <button onClick={handleSubmit}>Send</button>
    </div>
  );

问题是：处理输入状态的最佳实践是什么？ Should I have to create a state for every input? On the submission, I want to send the data to a DB.

Answer 1

我建议为所有这些创建一个全球状态经理，因为您的输入是动态生成的，并希望将数据发送到您的数据库
时，这将是一件好事

当数据准备发送我的意思是这样的东西
编辑：更改代码以使这个想法有些清楚，

我没有顺便测试它。

   const [data,setData] = useState([])
   useEffect(()=>{
 if(groupA)
    groupA.ForEach(e=>data.push({matchId:e.match.id,goalAway:0,goalHome:0})
setData(data)
  }
},[groupA])
   function setGoalHome({matchId,goalHome}){
      let index = 0;
      const currentMatch = data.find((element,i) => {
           index = i
           return (element.matchId = matchId)
       }
      currentMatch.goalHome = goalHome
      data[index] = currentMatch
      setData(data)
   }
   function setGoalAway({matchId,goalAway}){
     let index = 0;
      const currentMatch = data.find((element,i) => {
           index = i
           return (element.matchId = matchId)
       }
      currentMatch.goalAway= goalAway
      data[index] = currentMatch
      setData(data)

   }
   return (
    <div>
      <ul>
        {groupA &&
          groupA.map((match) => (
            <li key={match.id} className="matches">
              <img
                className="home-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.homeTeam.id)[0]
                    .crestUrl
                }`}
              />
              {match.homeTeam.name}
              <input
                onChange={(e) =>
                  setGoalHome({
                    match: match.id,
                    goalHome: e.target.value,
                  })
                }
              />
              vs
              {match.awayTeam.name}
              <input onChange={(e) => setGoalAway({
                    match: match.id,
                    goalAway: e.target.value,
                  }} />
              <img
                className="away-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.awayTeam.id)[0]
                    .crestUrl
                }`}
              />
            </li>
          ))}
      </ul>
      <button onClick={handleSubmit}>Send</button>
    </div>
  );