代码之家 › 专栏 › 技术社区 › Wai Yan Hein

更新嵌套对象的字段,而不是在React Redux中重新呈现视图(UI)

redux reactjs javascript

Wai Yan Hein · 技术社区 · 6 年前

我正在开发一个使用React和Redux作为前端JavaScript框架的Web应用程序。我在呈现视图和更新Redux状态/存储值方面遇到了一些问题。

我有一个更新redux状态值的输入字段。这是用于“我的文本”字段onchange的事件处理程序。

_handleNameInput= (event) => {
     this.props.updateField({
             name: 'name',
             value: event.target.value,
     })
}

在减速器中,我正在像这样更新状态字段

case RESTAURANT_CATEGORY_UPDATE_FIELD: {
            let freshState = { ...state };
            _.set(freshState, action.payload.name, action.payload.value);
            return freshState;
        }

我正在使用lodash更新状态对象的字段。

这是我的默认状态

let defaultState = {
     name: ''
}

当用户输入输入时,我会像这样在视图上显示实时状态值。

<h1>Name is: {this.props.name}</h1>

以上场景完全正常。当我改变输入的值时,它也会显示实时的变化。当我在状态中使用嵌套对象时,问题就开始了。我把默认状态更新为这个。

let defaultState = {
     form: {
        name: '',
     }
}

然后在回调中,我像这样更新。

this.props.updateField({
      name: 'form.name',
      value: event.target.value,
})

它正在更新对象的嵌套属性的redux状态/存储值。问题是当我像这样显示实时更改时

<h1>{this.props.form.name}</h1>

它没有更新/呈现视图。我怎么修?

1 回复 | 直到 6 年前

lecstor 6 年前

connect PureComponent

name

form

immer

import produce from "immer";

return produce(state, draft => {
  _.set(draft, action.payload.name, action.payload.value);
});

return {
  ...state,
  form: {
    ...state.form,
    name: action.payload.value
  }
};

不过,我建议您重新考虑使用一个action和reducer来更新任意深度嵌套的字段,并使用更具体的内容。

return {
  ...state,
  form: {
    ...state.form,
    [action.payload.name]: action.payload.value
  }
};

return produce(state, draft => {
  draft.form[action.payload.name] = action.payload.value;
});

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前