如何使用箭头设置状态功能来更改不在数组中的对象

Question

我想执行以下操作：

将对象值从下面的对象更改为新内容。

newClass: {
classTime: {
hour: "",
minutes: ""
},

我的完整代码集如下所示：

• 如您所见，我在timeArray对象中显示了hour和minutes，与newClass对象完全相同。

所以我想使用setState({hour: 'newData'})可能会导致问题，因为这个对象键在我的state中并不是唯一的。

另外，我想了解是否是将setState与=>函数一起使用的情况。我真的想继续改变这种状态，因为我将使用callback function传递它，以便我可以将newClass中的信息添加到对象数组中。这意味着newClass将是一个旨在将信息传输到我的parentcomponent的对象。

无论如何，我仍然对setState与prevState一起使用以及将其用于arrow function语法有一些疑问。

完整的代码在这里

我们在这里看到的是fromTwoWayBindingToNewObjfunction

import React from "react";
import TimePicker from "react-time-picker";
import "./styles.css";
class App extends React.Component {
state = {
time: "0:00",
timeArray: [{ className: "whatever", time: { hour: 10, minutes: 15 } }],
newClass: {
classTime: {
hour: "",
minutes: ""
},
instructor: "Kasturi"
}
};
onChangeTimeHandler = time => {
this.setState({ time });
};
pushTimeHandler = () => {
//gets the time from the TimePicker State
let time = this.state.time;
const [hour, minutes] = time.split(":").map(Number);
const obj = { hour, minutes };
this.setState(({ timeArray }) => ({
timeArray: [...timeArray, { hour: obj.hour, minutes: obj.minutes }]
}));
};
//this is the function that I am trying to implement with setState
fromTwoWayBindingToNewObj = () => {
let time = this.state.time;
const [hour, minutes] = time.split(":").map(Number);
const obj = { hour, minutes };
this.setState(({ classTime }) => ({
ClassTIme: { hour: obj.hour, minutes: obj.minutes }
}));
};
render() {
let arrayOfTime = [...this.state.timeArray];
let render =
arrayOfTime.length > 0
? arrayOfTime.map((time, index) => (
<p key={time[index]}>
hour:{time.hour} minute:{time.minutes}
</p>
))
: null;
return (
<div className="App">
<TimePicker
onChange={this.onChangeTimeHandler}
value={this.state.time}
/>
<h2>Time Displayed Below</h2>
<p>{this.state.time}</p>
<hr />
<h2>Temporary Objec New Class Display</h2>
<p>
CLass Time: Hour: {this.state.newClass.classTime.hour} Minutes:
{this.state.newClass.classTime.minutes}
</p>
<button onClick={this.fromTwoWayBindingToNewObj}>
Update Temp Obj
</button>
<hr />
<h2>The Array of time below</h2>
<p>{render}</p>
<button onClick={this.pushTimeHandler}>Push New Time</button>
</div>
);
}
}
export default App;

Answer 1

this.setState(({ classTime }) => ({
ClassTIme: { hour: obj.hour, minutes: obj.minutes }
}));

ClassTIme不正确，因为这在您的州不存在，并且未使用{ classTime }。 在您的州，您有newClass: { classTime: }，并且您的渲染返回正在尝试访问这些属性CLass Time: Hour: {this.state.newClass.classTime.hour} Minutes:。

我认为您正在尝试返回：

return {
newClass: {
classTime: {
hour: obj.hour,
minutes: obj.minutes
}
}
}

---

你是对的，你可以使用 setState 中的回调参数来简化prevState。我将通过逐步分解来提供帮助。

1. 将您的逻辑移动到 setState 中，并更改了箭头函数，使其使用块体，因此它需要使用return。

fromTwoWayBindingToNewObj = () => {
this.setState(prevState => {
let time = prevState.time;
const [hour, minutes] = time.split(":").map(Number);
const obj = { hour, minutes };
return {
newClass: {
classTime: {
hour: obj.hour,
minutes: obj.minutes
}
}
}
});
};

2. 用解构赋值简化了你的逻辑。你只使用来自州的时间。

fromTwoWayBindingToNewObj = () => {
this.setState(({time}) => {
const [hour, minutes] = time.split(":").map(Number);
const obj = { hour, minutes };
return {
newClass: {
classTime: {
hour: obj.hour,
minutes: obj.minutes
}
}
}
});
};

使用
3. 速记属性名称，我们可以摆脱使用obj.hour.

fromTwoWayBindingToNewObj = () => {
this.setState(({ time }) => {
const [hour, minutes] = time.split(":").map(Number);
return { newClass: { classTime: { hour, minutes } } };
});
};