时间戳

首页 > 解决方案 > React 子组件不会更新从父组件传递的属性

javascript - React 子组件不会更新从父组件传递的属性

问题描述

我有一个父组件和一个子组件作为反应中的功能组件。

父组件

const Parent = () => {

    const selectedProduct = 0;
    //const [servicesList, setServicesList] = useState<IService[]>([]);
    var servicesList = [] as IService[];
    var operationalProcessSelector = [] as IOperationalProcessSelector[];


    useEffect(()=>{
        fetchServicesList(840);
    }, []);

    const fetchServicesList = async (quotationId: number) => {

        const SERVICE_LIST_API_URL = `API URL...`;
        
        await axios.get(SERVICE_LIST_API_URL, {headers:API_REQ_HEADERS})
            .then((response:any)=>{

                if(response && response.data && response.data.length > 0 && response.data[0]){
                    
                    let product = response.data[selectedProduct];
                    let operationalProcesses = product.OperationalProcess;

                    updateServiceList(operationalProcesses);

                }

            });

    };

    const updateServiceList = (operationalProcesses: any) => {

        operationalProcesses.forEach((operationalProcessItem: any)=>{
            operationalProcessItem.Services.forEach((serviceItem: any) => {
                serviceItem.LineEditState = 'edit';
                serviceItem.ShowContent = true;
            });
        });

        const flattenedArray: IService[] = operationalProcesses.reduce(
                (accumulator: IService[], value: any) => accumulator.concat(value.Services), 
                [] as IService[]);

        //servicesList(flattenedArray);
        servicesList = flattenedArray;
        console.log('Update Services', servicesList); // It retrieves and outputs data here
    };



    return <ServiceGrid OperationalProcessSelector={operationalProcessSelector} />
}

export default Parent

子组件

const ServiceGrid = (props: Prop) => {
    
    console.log("Component ServiceGrid generated");

    const [tableData, setTableData] = useState<IService[]>(props.ServicesList);

    useEffect(()=>{
        console.log('component', tableData); // It does not return the value
    });






  return (
        
        <div>{tableData.map((e: any)=>e.childData)}</div> // It does not render the value here
  );
  
};

export default ServiceGrid;

interface Prop {
    OperationalProcessSelector: IOperationalProcessSelector[],
    ServicesList: IService[]
}

问题：为什么tableData子组件不加载？

我不确定我应该在这里使用 State 还是只使用一个普通变量。但是一旦我收到孩子的值，我可能会更新子变量，它应该会自动反映在子组件中。

PS： 我也在父组件和子组件中尝试过 useState() 。

父组件变量

const [servicesList, setServicesList] = useState<IService[]>([]);
const [operationalProcessSelector, setOperationalProcessSelector] = useState<IOperationalProcessSelector[]>([]);

即使在使用 setTableData 函数后它也不会反映。

子组件变量

useEffect(()=>{
        setTableData(props.ServicesList);
        // setOperationalProcessSelector(props.OperationalProcessSelector);
        console.log('component', props.ServicesList);
    }, []);

标签： javascriptreactjstypescriptreact-reduxreact-hooks

解决方案

你应该传递props.ServicesList给useEffect依赖数组。

useEffect(()=>{
        setTableData(props.ServicesList);
        // setOperationalProcessSelector(props.OperationalProcessSelector);
        console.log('component', props.ServicesList);
    }, [props.ServicesList]);

推荐阅读