使用 ReactJS 为嵌套数组分配状态

Question

我目前正在尝试使用钩子setState()将state分配给嵌套对象，但我在弄清楚语法以及我应该如何做到这一点方面有点挣扎。

我像这样构建我的组件：

const MainCard = props =>{
const passedState = props.location.state;
return(
<div className="main-container">
<div className="row">
<div className="col-md-6 col-lg-6">
<AttendeeCard passedState={passedState} />
</div>
<div className="col-md-6 col-lg-6">
<AttendeeCard passedState={passedState} />
</div>
</div>
</div>
)
}
export default withRouter(MainCard)

因此，从location收到的 props 是我将传递给AttendeeCard组件的数据。

这是我传递组件的数据。

我按以下方式构建了AttendeeCard组件：

const AttendeeCard = props =>{
const students= props.passedState.students;
const [isChecked, setIsChecked] = useState(false);
const checkInStudent= () =>{
setIsChecked(!isChecked);
}

return(
students.map((student,i)=>{
return(
<div className="studentCard">
<div className="checkinput">
<input type="checkbox" 
onChange={checkInStudent}
checked value={isChecked}/>
<span className="slider round"></span>
</div>
</div>
)
})
)
}

因此，我不想使用const [isChecked, setIsChecked] = useState(false);为所有复选框分配一个状态，而是为每个checkedin分配与用户对应的状态。

我试过写这样的东西：

students.map((student,i)=>{
const [isChecked, setIsChecked] = useState(student.checkedin);
return(
<div className="studentCard">
<div className="checkinput">
<input type="checkbox" 
onChange={checkInStudent}
checked value={isChecked}/>
<span className="slider round"></span>
</div>
</div>
)
})
})

但是我遇到了一个错误，它没有编译。

如何为数组中每个学生的每个checkedin嵌套对象分配状态？

更新：

每当我尝试上面的代码时，我得到的错误是：

React Hook "useState" 不能在回调中调用。反应钩子 必须在 React 函数组件或自定义 React Hook 中调用 函数反应钩子/钩子规则

Answer 1

React 钩子的规则之一是不要在循环中调用钩子。您可以改为将代码移动到新组件中，并调用组件内的钩子：

function StudentCard({ checkedIn }) {
const [isChecked, setIsChecked] = useState(checkedIn);
const checkInStudent = () => {
setIsChecked(!isChecked);
};
return (
<div className="studentCard">
<div className="checkinput">
<input
type="checkbox"
onChange={checkInStudent}
checked
value={isChecked}
/>
<span className="slider round"></span>
</div>
</div>
);;
}
const AttendeeCard = props => {
const students = props.passedState.students;
return students.map((student, i) => {
return (
<StudentCard
checkedIn={student.checkedin}
key={i}
/>
);
});
};

Answer 2

我认为您可以通过为studentCard创建一个新的子组件来使您的代码正常工作。所以你的代码将是这样的：

const AttendeeCard = props =>{
const students= props.passedState.students;
return(
students.map((student,i)=>{
return(
<StudentCard student=student/>
)
})
)

}

学生卡是这样的：

const StudentCard = props =>{
const [isChecked, setIsChecked] = useState(props.student.checkedin);
return(
<div className="studentCard">
<div className="checkinput">
<input type="checkbox" 
onChange={checkInStudent}
checked value={isChecked}/>
<span className="slider round"></span>
</div>
</div>
)
}

通过这种方式，每张学生卡都有其内部状态，您可以随时更改它。

我希望它能解决你的问题。如果它有效，请投票给我：(