Redux 状态更新两个单独的对象答案

【问题标题】：Redux state updates two seperate objectsRedux 状态更新两个单独的对象
【发布时间】：2019-10-10 14:14:35
【问题描述】：

我有影响者数据对象。这个对象正在使用FETCH_INFLUENCER 操作从数据库中提取并放入两个不同的对象中：influencer 和 formInfluencer 在 redux 存储中。然后我有动作 SET_INFLUENCER 应该创建新的状态实例并在 redux 中更新 influencer 对象。出于某种原因，它同时更新了influencer 和formInfluencer。我真的很难在这里找到答案，因为我认为我已尽一切努力防止将两个不同的变量指向同一个对象，但它仍然会发生。

减速器：

    case 'FETCH_INFLUENCER_FULFILLED':
        return { ...state, fetching: false, fetched: true, influencer: action.payload.data, formInfluencer: Object.assign([], action.payload.data) }
    case 'SET_INFLUENCER':
        return { ...state, influencer: action.payload }

行动：

export function fetchInfluencer(id) {
return {
    type: "FETCH_INFLUENCER",
    payload: axios.get('/api/influencer/' + id, {headers: {Authorization: 'Bearer ' + localStorage.getItem('token')}})
}
}
export function setInfluencer(influencer) {
return {
    type: "SET_INFLUENCER",
    payload: influencer
}
}

派送：

 handleUserChange(e) {
    let influencer = [...this.props.influencer]
    influencer[0].user[e.target.name] = e.target.value;
    this.props.dispatch(setInfluencer(influencer))
}

将状态映射到道具：

const mapStateToProps = (state) => {
return {
    influencer: state.influencers.influencer,
    formInfluencer: state.influencers.formInfluencer
}
}
export default connect(mapStateToProps)(InfluencerDetails)

如果您知道为什么会发生这种情况，我很乐意听到答案。

【问题讨论】：

influencer[0].user[e.target.name] 这会改变 props，这在 React 中是被禁止的。
这可能是它更新您商店中的两个对象的原因。
我认为用let influencer = [...this.props.influencer] 创建道具副本可以防止变异。那么解决这个问题的方法是什么？如果您有答案或提示，我对此有点想法。
这个道具也直接分配给redux state.influencer 而不是state.formInfluencer 所以我认为这不应该是一个问题。嗯，我猜我对突变主题有一些误解。
influencer = [...this.props.influencer] 制作了 this.props.influencer 的 shallow 副本；它的内容仍然与原始引用相同，因此影响者 [0] 仍然与 this.props.influencer[0] 相同的引用，并且变异的影响者 [0].user 仍然会变异该状态。

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

你不应该改变状态（如果你不改变它，那么你有多个变量指向同一个对象是没有问题的）。

代替：

handleUserChange(e) {
    let influencer = [...this.props.influencer]
    influencer[0].user[e.target.name] = e.target.value;
    this.props.dispatch(setInfluencer(influencer))
}

你应该做更多的工作：

handleUserChange(e) {
    const newUser = {
        ...this.props.influencer[0].user,
        [e.target.name]: e.target.value
    };
    const newInfluencer = {
        ...this.props.influencer[0],
        user: newUser
    };
    const newInfluencers = [...this.props.influencer];
    newInfluencers[0] = newInfluencer;

    this.props.dispatch(setInfluencer(newInfluencers));
}

【讨论】：

这似乎已经解决了这个问题。谢谢你！但是我想在这里问一个我不太明白的步骤。据我所知，我们在这里制作了一个新的const，它会复制用户并增加提供的价值。然后我们复制影响者对象本身并将 newUser 分配给它。但我想知道在这种情况下这一步在做什么：const newInfluencers = [...this.props.influencer];
哦，我现在没看错。因此，这一步只是创建一个新的 const，它是原始影响者对象的副本，并将 newInfluencer 分配给它。所以这是我所做的变异的一种绕行。不过，如果您对这里发生的事情有更好的解释，我很想听听。