代码之家 › 专栏 › 技术社区 › bvdb

当更改一个特定的状态设置时,是否需要重述所有其他状态设置?

setstate reactjs

bvdb · 技术社区 · 7 年前

constructor(props) {
  super(props);

  this.state = {
    setting_a: "value-1",
    setting_b: "color-green"
  }
}

setting_a ),我不需要其他设置(例如。 setting_b ...state ).

this.setState( {...this.state, setting_a: "value-2"});

自从引入 Component#getDerivedStateFromProps

static getDerivedStateFromProps(props, state) {
  const oldSetting = state.setting_a;
  const newSetting = props.setting_a;

  if (oldSetting !== newSetting) {
    // this is a very similar situation.
    return ({ ...state, state.setting_a: props.setting_a});
  }
  return null;
}

同样,在上面的示例中,我添加了所有以前的设置(即。 …状态

在这两种情况下,相同的问题是: 我是否需要特别重复已经在状态中的值?或者状态总是增量合并,而不删除?

2 回复 | 直到 7 年前

Bhojendra Rauniyar 7 年前

使用setState更新状态时,不需要复制状态(使用spread操作符或任何想法)。这个 setState 方法仅更新所需的状态:

this.setState( {setting_a: "value-2"});

所以,现在你仍然会得到:

state = {
    setting_a: "value-2",
    setting_b: "color-green"
  }

类似地,当您返回 getDerivedStateFromProps . 返回值应用于没有变异的状态。

// initial state
this.state = {
  settings: {
    a: 'value-1',
    b: 'color-green'
  }
}

现在,我们有 a 和 b settings 州。现在,如果你想更新 一 ,则需要复制 设置

this.setState((state) => ({settings: {...state.settings, a: 'value-2' } }))

前面的例子是设置对象。你可以用类似的状态数组来思考。你可以在谷歌上搜索

deorst 7 年前

视情况而定。在第一种情况下,您可以:

this.setState( prevState => {  
    prevState.setting_a = "value-2";  
    return prevState
});

this.setState({ setting_a: "value-2" });

根据 React Docs

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前