从 React 中的 useEffect 挂钩更改复选框选中状态？答案

【问题标题】：Change a checkbox checked state from a useEffect hook in React?从 React 中的 useEffect 挂钩更改复选框选中状态？
【发布时间】：2021-11-06 10:14:57
【问题描述】：

context.number 的值为 1。我想根据 context.number 将输入检查值设置为 true。因此，如果 context.number 为 1，则选中 Module 1 的复选框，表明 Module 1 已完成。我只能从 onChange 事件中更改输入值，所以我假设我需要一个 useEffect 挂钩，以便在 context.number 更改时自动执行它？

import React, { useState, useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import { AppContext } from "../context/AppContext";

export default function Menu() {

  const context = useContext(AppContext);

  //Determine the modules
  const modules = [
    {
      title: `Introduction`,
      subtitle: "Lesson 1",
    },
    {
      title: `Overview`,
      subtitle: "Lesson 2",
    }
  ];

  //Create a checked state for each module
  const [checkedState, setCheckedState] = useState(new Array(modules.length).fill(false));

  //Change checked value method
  const handleOnChange = (position) => {

    //map through checked states array, if position === mapped item index, flip the value
  const updatedCheckedState = checkedState.map((item, index) => (index === position ? 
  !item : item));

    //set that items state to the new value in the array
    setCheckedState(updatedCheckedState);
  };

  return (
    <>
        <div>
            {modules.map((module, index) => (
              <div className={styles.menuCard}>
                <Link key={index} to={`/Module/${index + 1}`}>
                  <h2>{module.title}</h2>
                  <p>{module.subtitle}</p>
                </Link>
                <input
                  id={`check${index}`}
                  type="checkbox"
                  onChange={() => handleOnChange(index)}
                  checked={checkedState[index]}
                />
              </div>
            ))}
        </div>
    </>
  );
}

【问题讨论】：

真正的解决方案是将以下代码移动到上下文中并将状态保存在其中。

标签： reactjs checkbox react-router state use-effect

【解决方案1】：

我把这是我的上下文文件，并且能够让它工作。我意识到这是一个措辞不佳的问题，但仍然找到了我的答案。 useEffect 不是问题，而是每个复选框只保存本地状态，所以如果我呈现另一个页面，复选框又回到未选中状态。

import React, { createContext, useState } from "react";
const AppContext = createContext();

function AppProvider(props) {

  //Determine the modules
  const modules = [
    {
      title: `Introduction`,
      subtitle: "Lesson 1",
    },
    {
      title: `Overview`,
      subtitle: "Lesson 2",
    }
  ];

  //set module number state
  const [number, setNumber] = useState();
  //Create a checked state for each module
  const [checkedState, setCheckedState] = useState(new Array(modules.length).fill(false));

  //change module number method
  function completionHandler(value) {
    setNumber(value);
  }

  //Change checked value method
  function handleChange(position) {
    const updatedCheckedState = checkedState.map((item, index) => (index == position ? !item : item));
    setCheckedState(updatedCheckedState);
  }

  //export method and state value
  const value = {
    number: number,
    modules: modules,
    checkedState: checkedState,
    handleChange: handleChange,
    completionHandler: completionHandler,
  };

  return <AppContext.Provider value={value}>{props.children}</AppContext.Provider>;
}

export { AppContext, AppProvider };

【讨论】：