React如何将数组传递给使用useState的子模态框组件并支持返回数组保存

问题梳理 #

• 父组件state定义不匹配：构造函数仅初始化了ae字段，后续代码调用的this.state.meeting、this.state.settings()均未在state中定义，settings不是方法，加括号调用会直接报错
• 父组件方法调用缺失this：return getMeetingAEArray()没有加this指向类实例，无法正确获取方法返回值
• 父子组件props命名不对应：父组件向子组件传递的属性名为AEArray，子组件调用的是props.getAEArray()，名称不匹配导致取值失败
• 初始值兜底逻辑缺失：meeting如果未完成初始化，直接访问meeting.settings.ae会直接抛出undefined错误

修正代码 #

父组件 #

import React, {Component} from 'react';
import AEModal from "./AEModal";

export default class MAT extends Component {
    constructor(props) {
        super(props);
        // 假设meeting是从props/接口获取，这里先完整初始化state
        this.state = {
            meeting: meeting || {}, // 这里根据你实际的meeting来源赋值，比如props.meeting
            ae: meeting?.settings?.ae || [] // 类型是数组就默认给空数组，不要给空字符串
        };
    }

    getMeetingAEArray = () => {
        // 用可选链简化兜底逻辑
        return this.state.meeting?.settings?.ae || [];
    }

    // 新增：接收子组件回传的修改后ae数组
    handleAEUpdate = (newAEArray) => {
        this.setState(prev => ({
            ...prev,
            meeting: {
                ...prev.meeting,
                settings: {
                    ...prev.meeting.settings,
                    ae: newAEArray
                }
            }
        }))
        // 后续可以在这里加保存接口的逻辑
    }

    getMeetingAE = () => {
        return <AEModal
            // 不用传函数，直接传值即可，state变化会自动同步给子组件
            meeting={this.state.meeting}
            AEArray={this.getMeetingAEArray()}
            // 传修改回调给子组件
            onAEUpdate={this.handleAEUpdate}
        />
    }
}

子组件 #

import React, { useState, useEffect } from "react";
import i18n from 'Components/translations/i18n';
import { Icon } from '@components';

function AEModal(props) {
  // 用props传入的AEArray作为useState初始值
  const [form, setForm] = useState(props.AEArray);
  
  // 监听props里AEArray变化，同步更新本地状态
  useEffect(() => {
    setForm(props.AEArray)
  }, [props.AEArray])

  // 示例：修改完成后调用父组件回调回传数据
  const handleSave = () => {
    props.onAEUpdate(form)
    // 这里可以加关闭模态框的逻辑
  }

  // 不需要再自己从meeting里取ae，直接用props传入的AEArray即可
  // 如果你需要用meeting其他字段，加兜底逻辑
  const meeting = props.meeting;
  const ae = meeting?.settings?.ae || [];
}

额外优化建议 #

• 涉及嵌套对象取值优先用可选链?.，可以避免层级属性不存在时的报错
• 数组类型的初始值不要赋值为空字符串，保持类型一致默认给空数组，避免后续数组方法调用报错
• 类组件的自定义方法调用必须带this，否则会找不到对应方法

内容的提问来源于stack exchange，提问作者pintekus