如何在 state 内的空 object 上执行 setState？

Question

所以我有一个 state 有点像这样

this.state={
  angles:{}
}

那么如何在这个空的 object 上执行 setState。 例如，如果我想在我的空角度内设置一个键和值。 我怎样才能做到这一点。 （同样，我希望在我的 this.state.anlges 中this.state.anlges 。设置 state 后，它应该看起来像

this.state={
   angles:{0:90}
}

提前致谢。 需要将 0 和 90 作为变量传递。

Answer 1

你可以通过设置一个新的angles object 来做到这一点，如果你想完全替换它，就像这样：

this.setState({angles: {0: 90}});

或者像这样，如果你想保留任何其他属性，只需替换0属性：

// Callback form (often best)
this.setState(({angles}) => ({angles: {...angles, 0: 90}}));

或者

// Using the current state (often okay, but not if there may be other state updates pending)
this.setState({angles: {...this.state.angles, 0: 90}});

---

在您问过的评论中：

实际上我需要将 0 和 90 作为变量传递。 例如，将 0 视为一个变量，将 90 视为一个变量。 那么在那种情况下我该怎么做呢？

在上面我有0: 90的地方，您可以使用计算属性表示法： [propertyname]: propertyvalue其中propertyname是包含属性名称的变量， propertyvalue是包含属性值的变量。 例如，这是带有这些变量的最后一个示例：

this.setState({angles: {...this.state.angles, [propertyname]: propertyvalue}});

Answer 2

你可以这样写：

this.setState((currentState) => ({
  angles: {
    ...currentState.angles,
    0: 90,
  }
}));

请注意，不建议将数字作为对象中的键

如果 0 和 90 都是值，则angles应该是包含值的数组。

例子：

angles: [[0,90], [60,45], [0, 45]]

要在您的 state 中执行此操作，您将执行以下操作：

// initial state:
this.state = {
  angles: [],
}

// add a value:
this.setState(({angles}) => ({ 
  angles: angles.concat([[0,90]])
}))

注意 concat 中的双数组语法，这是必要的。 没有这个，你最终会得到一个平坦的一维数组

Answer 3

我认为这是最简单的方法：

this.setState({angles: {0:99}});

Answer 4

你可能想要这样的东西：

const state = {
    angles: {}
};

const setThisToState = { 0: 90 };
const key = Object.keys(setThisToState).toString();
const value = Object.values(setThisToState).toString();

state.angels = { [key]: value }; // { angles: { '0': '90' }

编辑：

由于您要求变量中有 0 和 90，我想指出计算属性符号。

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

    this.state = {
      angles: {}
    }
  }

  componendDidMount() {
  // using object destructuring here
  const { angles } = this.state;

  // say you are fetching data from an API here
  fetch(fromAPI)
    .then(response => response.json())
    .then(data => { // say data.coordinates = { 0: 90 }
      const key = Object.keys(data.coordinates).toString();
      const value = Object.values(data.coordinates).toString();

      // this overrides current state.angles. To keep values of state.angles use 
      // the spread operator as mentioned below
      this.setState({ angles: { [key]: value }})

      // spread out current state.angles if you wanna keep the values + add a 
      // "new object"
      this.setState({ angles: ...angles, [key]: value})
    })
  }
}