Question

我目前正在尝试使用钩子state将setState()分配给嵌套对象，但是我在弄清楚语法以及应该如何精确地工作方面有些费力。

我的组件结构如下：

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收到的道具是我将传递给AttendeeCard组件的数据。

这是我passing down the component.的数据

我通过以下方式构造了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中调用函数react-hooks / rules-of-hooks

Answer 1

React钩子的规则之一是don't call hooks inside loops。您可以改为将代码移动到新组件中，并在该组件内部调用该钩子：

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/>
              )
         })

 )

}

和StudentCard会像这样：

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>
              )
}

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

我希望它能解决您的问题。如果可行，请投票给我：）

使用ReactJS将状态分配给嵌套数组

2 个答案: