期望表達。 與埃斯林特和反應

Question

這是我的代碼有問題

handleXPosition(e) {
    const x = parseFloat(e.target.value);
    this.setState((prevState) => ({ position: ...prevState.position, x}));
}

這是我的狀態：

this.state = {
    position: { x: 0.5, y: 0.5 },
    rotate: 0,
    scale: 1,
    width: 250,
    height: 160,
    imageSource: '',
    editMode: false,
 };

我的jsx部分中的按鈕：

<div>
    <TextField
        label="Position X"
        type="range"
        onChange={this.handleXPosition}
        inputProps={{ min: 0, max: 1, step: 0.01 }}
    />
</div>

我有此消息dans VS代碼

[ts] Expression expected. [1109]

在...prevState.position部分中。

我不明白

謝謝

Answer 1

怎么樣：

this.setState((prevState) => ({ position: prevState.position, x }));

甚至：

this.setState((prevState) => ({ ...prevState, x }));

Answer 2

請更改以下行：

this.setState((prevState) => ({ position: {...prevState.position}, x}));

要么

this.setState((prevState) => ({...prevState, x}));

Answer 3

如果您只想從您的狀態中取出該position ，則無需對其進行解構：

handleXPosition(e) {
    const x = parseFloat(e.target.value);
    this.setState(prevState => ({ position: prevState.position, x }));
}

如果您想從以前的道具中取出所有價值，請執行以下操作：

handleXPosition(e) {
    const x = parseFloat(e.target.value);
    this.setState(prevState => ({ ...prevState, x }));
}

---

編輯

要修改嵌套的x值，您將必須將舊對象解構到適當位置，並且僅覆蓋x值：

this.setState(prevState => ({ position: {...prevState.position, x}}));

Answer 4

嘗試這樣：

編輯：

handleXPosition = (
    e: {
      target: { value },
    },
  ) => {
    this.setState(prevState => ({ position: prevState.position, x: parseFloat(value) }));
  };

編輯了答案。