时间戳

首页 > 解决方案 > 更新 React 状态的一个字段

javascript - 更新 React 状态的一个字段

问题描述

我的问题是如何更新反应状态的一个字段（如果我有多个），例如：

class TestingClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
          name: "",
          lastname: "something"
        };
    }
};

现在在某些方法中，我从 render() 运行

someMethod = () => {
      this.setState(state => {
        const newName = state.name + " 0 ";
        return { newName };
      });
    };

而现在状态将只有一个字段（名称），姓氏将消失。还是我错了……？

标签： javascriptreactjs

解决方案

而现在状态将只有一个字段（名称），姓氏将消失。

不，setState将您提供的对象与现有状态合并。在您的代码中，您的状态对象最终将具有name, lastname, 和newName（因为这是您在从setState回调返回的对象中使用的名称）。

如果要更新name，则需要name在要返回的新对象中使用名称：

someMethod = () => {
  this.setState(state => {
    const name = state.name + " 0 ";
    return { name };
  });
};

旁注：如果您愿意，该代码可以更简洁，使用简洁的箭头函数和解构：

someMethod = () => {
  this.setState(({name}) => ({ name: name + " 0"}));
};

或仅使用解构但将函数体保留在箭头函数上：

someMethod = () => {
  this.setState(({name}) => {
    name += " 0";
    return { name };
  }
};

我不提倡它（缩小是为了缩小），但知道......

推荐阅读