使用dispatch更新数组并避免无限循环问题求助

先拆解代码里导致无限循环和功能异常的核心问题：

1. 无限循环的直接原因 #

你的useEffect把profile设为依赖项，但内部又调用setProfile修改profile——每次profile更新都会触发useEffect，而useEffect又会再次更新profile，直接形成无限循环。这和useMemo无关，不需要用useMemo解决，修正useEffect逻辑即可。

2. 其他关键错误 #

• 初始数据放置错误：let userProfiles = [...]在组件每次渲染时都会重新创建，作为初始数据应该直接放到useState的初始值里。
• 按钮点击事件写法错误：React中点击事件是驼峰命名的onClick，且onClick={onClickAdd()}会在组件渲染时立即执行函数，应该传函数引用onClick={onClickAdd}。
• 状态更新不符合需求：你需要结合现有内容和新配置更新，而不是直接替换，应该用数组展开合并现有profile和newProfile。
• 状态管理混乱：同时用组件内useState(profile)和Redux的dispatch(setProfile)，如果要同步到Redux，建议直接从Redux获取状态，避免组件内重复维护。

修正后的代码 #

这里以组件内useState管理状态为例（如果用Redux，只需把profile通过useSelector从store获取，更新时dispatch合并后的数组即可）：

export const AddProfile = () => {
    // 把初始数据直接作为useState的初始值
    const [profile, setProfile] = useState([{mail: "firstguy@something.com", display: "someguy"}]);
    const dispatch = useDispatch()
    
    // 移除导致无限循环的useEffect
    const onClickAdd = () => {
        const newProfile = [
            {mail: "zsdfsdfsdf.zheng@ericsson.com", display:"Börje"},
            {mail: "basdb.zheng@ericsson.com", display:"Olle"},
            {mail: "123132.zheng@ericsson.com", display:"kent"}
        ]
        // 合并现有数据与新数据，避免覆盖原有内容
        const updatedProfile = [...profile, ...newProfile]
        // 更新组件内状态
        setProfile(updatedProfile)
        // 同步到数据库/Redux（根据实际需求调用）
        dispatch(setProfile(updatedProfile))
    }

    return (
        <button onClick={onClickAdd}>submit</button>
    )
}

额外说明 #

• 如果使用Redux管理状态，建议用useSelector获取profile，不要在组件内用useState重复维护，避免状态不一致。
• useMemo的作用是缓存计算结果、避免不必要的重渲染，不是用来解决这种更新循环问题的，不要误用。

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