如何在 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})
    })
  }
}