Состояние Redux обновляет два отдельных объекта - PullRequest
Новая
       11

Состояние Redux обновляет два отдельных объекта

0 голосов
/ 10 октября 2019

У меня есть объект данных влияния. Этот объект извлекается из базы данных с действием FETCH_INFLUENCER и помещается в два разных объекта: influencer и formInfluencer в хранилище с избыточностью. И тогда у меня есть действие SET_INFLUENCER, которое должно создать новый экземпляр состояния и обновить объект influencer в избыточном. По какой-то причине он обновляет influencer и formInfluencer. Я действительно изо всех сил пытаюсь найти ответ здесь, так как я думаю, что я сделал все, чтобы предотвратить наведение двух разных переменных на один и тот же объект, и все же это происходит.

reducer: 

    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 }

actions: 

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)

Если у вас есть идеи, почему это может происходить, я был бы рад услышать ответ.

1 Ответ

2 голосов
/ 10 октября 2019

Вы не должны изменять состояние (если вы не изменяете его, то нет проблем, если у вас есть несколько переменных, указывающих на один и тот же объект).

Вместо: 

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));
}
...