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

编辑了答案。

期望表达。与埃斯林特和反应

4 个答案: