我想使用输入字段的值来自不同的地方

Question

我试图显示一个固定的足球比赛，并使用户能够预测比分。这里有两个数组，一个叫做FIXTURES，另一个叫做SAVED_PREDICTIONS，用来显示用户保存到firestore的内容。

为了将PREDICTIONS保存到firestore，我必须从数组中创建对象，因此，而不是这个

固定数组:

0: {id: 416384, score: {…}, etc..}

我拯救这样的:

SAVED_PREDICTIONS数组:

0:
416375: {id: 416375, score: {…}, etc..}

有两个组件，Predict和PredictField。PredictField打印出每个fixture的输入。我试图在这些字段内使用SAVED_PREDICTIONS的值，但是因为这个数组使用matchId作为键，我似乎无法正确引用它。

有人可以帮助我引用正确的SAVED_PREDICTIONS ARRAY对象为每个FIXTURE输入，使用matchId?

预测组件:

{fixture.map((el: any, i: number) => (
<PredictField
key={i}
allFixtures={data}
fixture={el}
predictions={predictions}
matchDay={el.matchday}
index={index}
innerIndex={i}
onchange={onchange}
/>
))}

PredictField组件:

import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
export const PredictField = (props: any) => {
const { fixture, onchange, index, allFixtures, innerIndex } = props;
const predictions = useSelector((state: any) => state.predictForm);
const [home, setHome] = useState(0);
const [away, setAway] = useState(0);
useEffect(() => {
if (predictions.userPredictions[0]) {
let test = Object.keys(predictions.userPredictions[0][index]);
setHome(
predictions.userPredictions[0][index][test[innerIndex]].score.fullTime.homeTeam === null
? 0
: predictions.userPredictions[0][index][test[innerIndex]].score.fullTime.homeTeam
);
setAway(
predictions.userPredictions[0][index][test[innerIndex]].score.fullTime.awayTeam === null
? 0
: predictions.userPredictions[0][index][test[innerIndex]].score.fullTime.awayTeam
);
}
}, []);
const handleOnChangeHome = (e: any) => {
setHome(e.value);
onchange(e);
};
const handleOnChangeAway = (e: any) => {
setAway(e.value);
onchange(e);
};
return (
<div>
<p>
{fixture.matchday}, {fixture.id}
</p>
<label>{fixture.homeTeam.name.replace("FC", "")}</label>
<input
name={`homeTeam-${fixture.id}`}
type="number"
value={home}
onChange={(e) => handleOnChangeHome(e.target)}
/>
<input
name={`awayTeam-${fixture.id}`}
type="number"
value={away}
onChange={(e) => handleOnChangeAway(e.target)}
/>
<label>{fixture.awayTeam.name.replace("FC", "")}</label>
</div>
);
};

数组中FIXTURE和SAVED_PREDICTIONS对象的示例(它们具有相同的键，只是在SAVED_PREDICTIONS中使用matchId作为键引用不同):

{
"score": {
"extraTime": {
"awayTeam": null,
"homeTeam": null
},
"fullTime": {
"awayTeam": 0,
"homeTeam": 2
},
"halfTime": {
"awayTeam": null,
"homeTeam": null
},
"penalties": {
"awayTeam": null,
"homeTeam": null
},
"winner": "Crystal Palace FC",
"duration": "REGULAR"
},
"matchday": 1,
"id": 416384,
"awayTeam": {
"id": 57,
"name": "Arsenal FC"
},
"referees": [],
"odds": {
"msg": "Activate Odds-Package in User-Panel to retrieve odds."
},
"lastUpdated": "2022-06-16T15:49:58Z",
"season": {
"currentMatchday": 1,
"id": 1490,
"startDate": "2022-08-05",
"endDate": "2023-05-28"
},
"homeTeam": {
"name": "Crystal Palace FC",
"id": 354
},
"group": null,
"utcDate": "2022-08-05T19:00:00Z",
"status": "SCHEDULED",
"stage": "REGULAR_SEASON"
}

Answer 1

我使用.find是因为它返回与表达式匹配的对象数组。然后与'发现'数组对象，我使用'夹具。确切的对象id的引用

let found = predictions.userPredictions[0].find((el: any) => {
return el[fixture.id];
});

setHome(found[fixture.id].score.fullTime.homeTeam === null ? 0 : found[fixture.id].score.fullTime.homeTeam);

setAway(found[fixture.id].score.fullTime.awayTeam === null ? 0 : found[fixture.id].score.fullTime.awayTeam);