时间戳

首页 > 解决方案 > 预期的表达。用 eslint 做出反应

reactjs - 预期的表达。用 eslint 做出反应

问题描述

这是我的代码有问题

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 code

[ts] Expression expected. [1109]

在...prevState.position部分。

我不明白

感谢

标签： reactjseslint

解决方案

如果你只想position从你的状态中取出，你不需要解构它：

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

如果你想从之前的 props 中取出每个值：

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

编辑

要修改嵌套x值，您必须将旧对象解构到适当位置，并且只覆盖该x值：

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

推荐阅读