Я использую ловушки для извлечения данных из SQL таблиц - данные должны быть сопоставлены на основе первичных / внешних ключей. Вот соответствующий код:
const ServiceAreaTile = () => {
const psOverviewSA = useSelector((state) => state.psOverviewSA);
const [, setPsOverviewSA] = useState(false);
const dispatch = useDispatch();
const handleChangePerf = (event, riskContract) => {
let index = psOverviewSA.findIndex(riskContract => riskContract.RiskContract ===
event.currentTarget.id) //ensures it only targets the card that is clicked on
let newArray = [...psOverviewSA]
dispatch(getpsContractDetailPerf(newArray[index].PerformanceYR, newArray[index].MasterContractKey,
newArray[index].SubRegionKey))
newArray[index].showDetailPerf = !newArray[index].showDetailPerf;
setPsOverviewSA(newArray)
}
return psOverviewSA.map((riskContract) => {
return (
//some code
<Card>
<CardHeader title="Performance Results"></CardHeader>
<CardContent>{riskContract.PerformanceResults}</CardContent>
<CardActions disableSpacing>
<IconButton id={riskContract.RiskContract}
onClick={(event, riskContract) => handleChangePerf(event, riskContract)}
className={clsx(classes.expand, {
[classes.expandOpen]: riskContract.showDetailPerf,
})}
aria-expanded={riskContract.showDetailPerf}
aria-label="show more">
<ExpandMoreIcon />
</IconButton>
</CardActions>
</Card>
//more code
{riskContract.showDetailPerf && <div><SAContractPerfTable /></div>}
SAContractPerfTable импортируется из другого файла, но по существу, когда вызывается событие обработчика изменений, действие отправки захватывает сетку данных на основе записи, прикрепленной к карте, которая был нажат. Это идеально, пока у вас не будет открыто более одной карты - затем он обновит состояние, чтобы все «развернутые» карты отображали данные для карты, по которой щелкнули последним. Я хочу, чтобы состояние открытых карт оставалось неизменным при щелчке по другой карте.
Я пытался создать codeandbox, но есть много зависимостей от таких вещей, как ax ios и внутренние данные, поэтому я надеюсь, что мне просто не хватает чего-то очевидного. Любая помощь приветствуется!