填充后反应返回空数组（可能重新渲染问题）

Question

我从发送到 EditMainContact 的父组件加载联系人，这是一个 dialog/modal 表单，其中在输入中设置值以编辑它们。所以我使用 contacto 作为 useEffect 的触发器，因此当它加载或更改时，相关数据将转换为我稍后将使用的 2 个数组。它们是 tels_empresa 和 emails_empresa。同时，当这些更改时，将填充表单的值（这是不起作用的地方）。它显示了一个具有最后一个值的输入。我可能在这里遗漏了一些东西，也许这是出于某种原因重新渲染，最后它 returns 一个 empty-ish 数组。代码比这长得多，但我把我认为解决这个问题所需的数据放在这里。

export default function EditMainContact({contacto}) {
    const [tels_empresa,setTels_empresa] =useState();
    const [emails_empresa,setEmails_empresa] =useState();
    const [telFormValues, setTelFormValues] = useState([]); 
    const [emailFormValues, setEmailFormValues] = useState([]);  
    
    useEffect(()=>{
        setTels_empresa(contacto?.telefonos_empresa?.split(",").map(par=>par.split(":")));
        setEmails_empresa(contacto?.emails_empresa?.split(",").map(par=>par.split(":")));
    },[contacto]);
    
    useEffect(()=>{
        tels_empresa?.map((inp, index)=>{
            setTelFormValues([...telFormValues,{tel_identificador: inp[0], tel: inp[1]}]);
            setFormValues({...formValues, ["telefonos_empresa"]: telFormValues});
        });
    },[tels_empresa]);
    
    useEffect(()=>{
        emails_empresa?.map((inp, index)=>{ 
            setEmailFormValues([...emailFormValues,{email_identificador: inp[0],email:inp[1]}]);
            setFormValues({...formValues, ["emails_empresa"]: emailFormValues});
        });
    },[emails_empresa])

}

Answer 1

问题是在 useEffect 回调的范围内，您没有 telFormValues、emailFormValues 和 formValues.[=18 的最新值=]

每次 tels_empresa 或 emails_empresa 更改时，都会重新创建 useEffect 回调和运行s，但它指向其他常量的“旧”值你在回调的范围内使用。

要解决此问题，您有 2 个选择：

将其他常量添加到 dependencies 数组。（但这将使 useEffect 运行也在其他常量更改时）
使用 setter 以前的值功能。这可确保您获得最新的值。这是一个示例：（您需要对其他 setters 执行相同的操作）

setTelFormValues((prevTelFormValues) => [...prevTelFormValues, {tel_identificador: inp[0]...

填充后反应返回空数组（可能重新渲染问题）

React returning empty array after populating it (possibly re-render problem)

arrays

reactjs