Question

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

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

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

Answer 1

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

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

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

name

旁注：如果需要，该代码可以更简洁，使用简洁的箭头功能并进行解构：

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

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

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

我不是在提倡（缩小是指缩小者），但是了解...很有用...

Answer 2

由于您是在setState中进行此操作的，因此您的方法有效，并且会将更新后的name与其余状态合并。

在React状态下更新一个字段

2 个答案: