如何在 react 中从子组件设置父组件的状态?

Question

我在父组件中有一个状态，其中包含一组患者。我的Child Component 4是一个Countdown component(//倒计时组件为数组中的每个患者单独呈现倒计时(，当倒计时达到 <=0 时，我想将患者的locationInfo & status值重置为患者数组中的空字符串。在我的父组件中，我有resetPatient映射到patient array的函数，并且应该将计数器为 <=0 的患者的值(locationInfo & status)设置为空字符串。resetPatient 函数作为道具传递给我的倒计时组件(4(。在倒计时组件中，当计数器达到 <=0 时，我调用this.props.resetPatient函数。但是，这对我不起作用。父组件上的状态不会更改。

Parent Component - Child Component 1 - Child Component 2 - Child Component 3 - Child Component 4

Parent component 
export default class ObservationWorkflow extends React.Component {

constructor(props) {
super(props);
this.state = {
patients = [
{ room: "1", name: 'John', locationInfo: 'TV', status: 'Awake'},
{ room: "2", name: 'Shawn, locationInfo: 'Toilet', status: 'Awake'},
{ room: "3", name: 'Gereth, locationInfo: 'Garden', status: 'Awake'}
]
}
this.resetPatient = this.resetPatient.bind(this);
}

resetPatient = (patient, index) => {
this.setState(prevState => ({
patients: prevState.patients.map((patient, i) => {
if (i === index) {
return {
...patient,
locationInfo: '', 
status: ''
};
}
return patient;
}),
}));
}
render() {
return (
<Child component(1)={this.resetPatient} // then child component 2 passes it down as props to 3 then 4. 
)
}
}

Countdown component(4)// countdown component renders individually countdown for each patient in the array. 
export default class ObservationCountDown extends React.Component {
constructor(props) {
super(props);
this.state = {
obsTimeleft: undefined
};
this.countDown = this.countDown.bind(this);
this.startCountdown = this.startCountdown.bind(this);
this.countDownInterval = null;
}
countDown() {
const { obsTakenTime, patient, index } = this.props; 
const nextDueTimeForObs = moment(obsTakenTime).add(10, 'minutes'); 
const nextObservationTime = nextDueTimeForObs.subtract(moment.now()).format('mm');
if (obsTakenTime) {
this.setState({ obsTimeleft: nextObservationTime + ' mins' });
}
if (Number(nextObservationTime) <= 1) {
this.props.disablePatientUpdate();
}
if (Number(nextObservationTime) <= 0) {
this.setState({ obsTimeleft: 'Overdue' });
this.props.enablePatientUpdate();
clearInterval(this.countDownInterval);
() => this.props.resetPatient(patient, index); // here i call the function as call back
}
}

如何在 react 中从子组件设置父组件的状态。

Answer 1

看起来您没有调用resetPatient，并且在任何情况下都没有在该范围内定义index。

我会在您的患者对象中添加一个id，并使用它来确定需要重置哪个对象：

patients = [
{ id:1, room: "1", name: 'John', locationInfo: 'TV', status: 'Awake'},
{ id:2, room: "2", name: 'Shawn, locationInfo: 'Toilet', status: 'Awake'},
{ id:3, room: ... }]

您的resetPatient将变为：

resetPatient = (patient) => {
this.setState(prevState => ({
patients: prevState.patients.map(p => {
if (patient.id === p.id) {
return {
...p,
locationInfo: '', 
status: ''
};
}
return p;
}),
}));
}

然后你可以打电话：

this.props.resetPatient(patient)

Answer 2

首先，当您已经在使用箭头函数时，不再需要this.resetPatient = this.resetPatient.bind(this);resetPatient = (patient, index) => {...}

其次，像这样传递你的回调：

<Child resetPatient= { this.resetPatient } />

然后在孩子中作为道具访问它：

this.props.resetPatient(..., ...)

希望对你有帮助

Answer 3

尝试像这样调用函数

this.props.resetPatient(patient, index);

通过执行() => this.props.resetPatient(patient, index);，您只是声明了另一个必须再次调用的函数， 您可以将其更改为

(() => this.props.resetPatient(patient, index))();

但这似乎没有必要。