React应用中动态职位复选框无法勾选/取消勾选问题求助

Hey there! I see you're stuck with checkboxes not updating in your React app—let's break down what's going wrong and fix it.

The Core Problem #

Right now, you're making two key mistakes that prevent your checkboxes from working as expected:

1. Direct DOM manipulation: React uses a virtual DOM and state/props to drive UI changes. When you manually set document.getElementById(job.JobTitleID).checked, you're bypassing React's state management, so React has no idea the DOM changed and won't sync it with your component's data.
2. Unmanaged static data: Your departments array is a constant, not tracked by React state. Even if you modified the raw data (you aren't doing this now), React wouldn't trigger a re-render to update the UI.

The Solution: Use React State to Manage Checkbox Status #

We need to move your department data into component state, then update that state when checkboxes are toggled. Here's how to adjust your code:

Step 1: Convert Static Data to State

First, use React's useState hook to manage your departments data inside the component. This lets React track changes and re-render when needed.

Step 2: Update State Instead of DOM

Rewrite your handleJobTitle function to update the state directly (no more DOM hacks!). We'll create a copy of the state, modify the relevant checkbox value, then set the new state.

Full Modified Code

const initialDepartments = [ 
  { 
    "sectorId":29, 
    "sectorName":"Building Materials Mfg. & Distribution", 
    "departments":[ 
      { 
        "deptName":"Manufacturing", 
        "jobTitles":[ 
          { "453":false, "JobTitleID":453, "DepartmentID":101, "JobName":"Consultant", "Deleted":false, "SortOrder":5 }, 
          { "323":true, "JobTitleID":323, "DepartmentID":101, "JobName":"Quality Control", "Deleted":false, "SortOrder":1 } 
        ] 
      }, 
      { 
        "deptName":"Warehouse", 
        "jobTitles":[ 
          { "326":false, "JobTitleID":326, "DepartmentID":98, "JobName":"Warehouse Supervisor", "Deleted":false, "SortOrder":1 } 
        ] 
      }, 
      { 
        "deptName":"Administration", 
        "jobTitles":[ 
          { "384":true, "JobTitleID":384, "DepartmentID":115, "JobName":"Controller", "Deleted":false, "SortOrder":1 } 
        ] 
      } 
    ] 
  } 
];

const App = () => {
  // Move data into component state
  const [departments, setDepartments] = React.useState(initialDepartments);

  // Update state instead of manipulating DOM
  const handleJobTitle = (jobId, deptIndex, jobIndex) => {
    setDepartments(prevState => {
      // Create a deep copy of the state to avoid mutating original data
      const updatedState = JSON.parse(JSON.stringify(prevState));
      // Toggle the checkbox value for the selected job
      const targetJob = updatedState[0].departments[deptIndex].jobTitles[jobIndex];
      targetJob[jobId] = !targetJob[jobId];
      return updatedState;
    });
  };

  return (
    <div>
      {departments && departments.map((levelOne, i) => (
        <div key={i} >
          <p>{levelOne.sectorName}</p>
          {levelOne.departments.map((levelTwo, j) => (
            <div key={j}>
              <p>{levelTwo.deptName}</p>
              {levelTwo.jobTitles.map((job, l) => (
                <div key={l}>
                  <input
                    type="checkbox"
                    id={job.JobTitleID}
                    onChange={() => handleJobTitle(job.JobTitleID, j, l)}
                    name={job.JobName}
                    checked={job[job.JobTitleID]}
                  />
                  <span>{job.JobName}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

// Render it
ReactDOM.render(<App />, document.getElementById("root"));

Key Explanations: #

• State Management: By using useState, React now knows to re-render the component whenever departments changes.
• Immutability: We create a deep copy of the state before modifying it (JSON.parse(JSON.stringify(prevState))). This ensures we don't mutate the original state object, which is a React best practice.
• No DOM Manipulation: The onChange handler now updates the state directly, and React takes care of updating the checkbox's checked attribute automatically.

Bonus: If You Fetch Data from an API #

If your departments data comes from an API call, you'll want to fetch it inside a useEffect hook and set the state once the data loads:

React.useEffect(() => {
  // Replace with your actual API call
  fetch('/api/departments')
    .then(res => res.json())
    .then(data => setDepartments(data));
}, []);

内容的提问来源于stack exchange，提问作者Undefined