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

Question

here is my code with a problem

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

this my state:

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

my button in my jsx part:

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

i have this message dans VS code

[ts] Expression expected. [1109]

in the ...prevState.position part.

and I do not understand

thank

Answer 1

How about the following:

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

or even:

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

Answer 2

Please change line to following:

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

or

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

Answer 3

If you only want to take out the position from your state, you do not need to deconstruct it :

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

And if you want to take out every values from your previous props :

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

---

EDIT

To modify the nested x value, you will have to deconstruct your old object into position and only override the x value :

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

Answer 4

try it like this:

EDIT:

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

edited the answer.