使用 map 渲染父子组件，同时将数据传递给父组件更改使用 map 渲染的所有其他组件

Question

我有两个组件说 A 和 B。B 是 A 的孩子。

Component A 是一个数据列表，它是在 map 函数的帮助下呈现的。 B 从 A 获取一些数据，B 根据 A 的值运行 API 调用，B 再次使用 map 函数呈现列表数据并将一些数据返回给 A。根据从 B 返回的数据，A 更改了一些样式。

但是当我将数据传递给组件 A 中的整个项目的样式更改时，我只想更改使用地图在 A 中呈现的一个组件的样式

有人帮我解决这个问题吗？

这是一些代码片段

组件 A：

import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import CircularProgress from '@material-ui/core/CircularProgress';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import {green, orange} from '@material-ui/core/colors';
import service from "../../../service/service";
import TrustedAdvisorTable from "../TrustedAdvisorTable/TrustedAdvisorTable";

const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
    },
    heading: {
        fontSize: theme.typography.pxToRem(16),
        fontWeight: theme.typography.fontWeightRegular,
    },
    subHeading: {
        fontSize: theme.typography.pxToRem(18),
        paddingLeft: 15,
        paddingBottom: 20,
        fontWeight: theme.typography.fontWeightBold,
    }
}));

export default function TrustedAdvisorRecommendations() {
    const classes = useStyles();
    const [value, setValue] = useState(false);
    const [recommendation, setRecommendation] = useState([]);
    const [loading, setLoading] = useState(false);
    const [statusColor, setStatusColor] = useState(orange[400]);
    const [statusClass, setStatusClass] = useState("");

    useEffect(() => {
        service.recommendations().getRecommendationIds({value: "[test]"})
            .then((ref) => {
                setRecommendation(ref.data.recommendationIds);
                setLoading(true);
            })
            .catch((err) => {
                setLoading(true);
            })
    }, [value])


    const removeAccordion =(event)=>{
        setStatusColor(green[300]);
        setStatusClass(event);
    }
    return (
        <div className={classes.root}>
            {loading ?
            recommendation.map(function (recommendation) {
                return (
                    <Accordion key={recommendation.id}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon/>}
                            aria-controls="panel1a-content"
                            key={recommendation.id}
                        >
                            <InfoOutlinedIcon style={{paddingRight: 20, color: statusColor}}/>
                            <Typography className={classes.heading}>{recommendation.name} {statusClass}</Typography>
                        </AccordionSummary>
                        <TrustedAdvisorTable checkId={recommendation.id}/>
                    </Accordion>
                )
            }): <CircularProgress color="secondary"/>
            }
        </div>
    );
}

组分 B（在组分 A 中）

import React, {useEffect, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import service from "../../../service/service";

const useStyles = makeStyles({
    table: {
        minWidth: 650,
    },
});

function createData(name, calories, fat, carbs, protein) {
    return { name, calories, fat, carbs, protein };
}
export default function TrustedAdvisorTable(props) {
    const classes = useStyles();
    const [tableData, setTableData] = useState([]);
    const [tableBasic, setTableBasic] = useState([]);
    const [value, setValue] = useState(false);
    const [loading, setLoading ] = useState(false);
    const [haveData, setHaveData] = useState(false);

    useEffect(() => {
        service.recommendations().getRecommendationBasedOnId({check_id:props.checkId,value: "[test]"})
            .then((ref) => {
                const trustData = ref.data.recommendations;
                if (trustData.length > 0){
                    setLoading(true);
                    setTableData(ref.data.recommendations);
                    setHaveData(true);
                    props.onChange(ref.data.requestRecommendationId)
                }
                else{
                    props.onChange(tableData.resourcesSummary.accountId)
                }
            })
            .catch((err) => {
                  console.log(err)
            })
    }, [value])


    return (
        <div>
            <TableContainer component={Paper}>
                <Table className={classes.table} size="small" aria-label="a dense table">
                    <TableHead>
                        <TableRow>
                            <TableCell align="left">Heading 1</TableCell>
                            <TableCell align="left">Heading 2</TableCell>
                            <TableCell align="left">Heading 3</TableCell>
                            <TableCell align="left">Heading 4</TableCell>
                            <TableCell align="left">Heading 5</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {
                            loading && haveData &&
                            tableData.map((row) => (
                                        <TableRow>
                                            <TableCell component="th" scope="row">
                                                {row.resourcesSummary.data1}
                                            </TableCell>
                                            <TableCell align="left">{row.resourcesSummary.data2}</TableCell>
                                            <TableCell align="left">{row.resourcesSummary.data3}</TableCell>
                                            <TableCell align="left">{row.resourcesSummary.data4}</TableCell>
                                            <TableCell align="left">{row.resourcesSummary.data5}</TableCell>
                                        </TableRow>
                                    ))
                        }
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    );
}