如何在不使用 state 变量的情况下实现实时重新渲染？

Question

Consider the following array of objects:

const tasks = [
    {
      text: "Finish this page",
      deadline: new Date("05/01/2022"),
      status: "complete",
      // ToDo: Add priority fields
    },
    {
      text: "Finish Pierian UI/UX",
      deadline: new Date("05/10/2022"),
      status: "incomplete",
    },
    {
      text: "Finish Internship",
      deadline: new Date("05/05/2022"),
      status: "incomplete",
    },
    {
      text: "Anaadyanta",
      deadline: new Date("05/12/2022"),
      status: "incomplete",
    },
    {
      text: "Random task",
      deadline: new Date("05/19/2022"),
      status: "incomplete",
    },
  ];

Consider the following function:

{tasks.map((element) => {
        return (
          <p
            key={element.name}
            className={element.status === "complete" && "strike"}
            style={{ borderLeft: "2px solid red" }}>
            <Checkbox
              size="small"
              onClick={() => {
                if (element.status === "incomplete")
                  element.status = "complete";
                else if (element.status === "complete") {
                  element.status = "incomplete";
                }
                // ToDo : Add few things like popping
              }}
              color="success"
              checked={element.status === "complete" && true}
            />
            {element.text}
          </p>
        );
      })}

Now since element.status is not a state, changing its value doesnt re render the JSX element. How do I achieve this? I thought of using a state variable, but that when changed would reflect changes in all rendered elements and not only the current element.

Answer 1

You can't - at least, not in any good way. The way React determines when it needs to re-render is when a state setter is called.

A React application should, whenever possible, have the appearance of the application come as much from state as possible. That is, ideally, given the state of all components, you should be able to determine everything about what's being rendered to the user.

I thought of using a state variable, but that when changed would reflect changes in all rendered elements and not only the current element.

Why would it necessarily change all elements? Just change the one element being iterated over. To make things easier, use complete: boolean instead of status: 'complete' | 'incomplete' status: 'complete' | 'incomplete' .

const [tasks, setTasks] = useState([
    {
      text: "Finish this page",
      deadline: new Date("05/01/2022"),
      complete: true
      // ToDo: Add priority fields
    },
    // ...
]);
// ...
{tasks.map((element, i) => {
    ...
    onClick={() => {
        setTasks(tasks.map(
            (task, j) => i === j ? { ...task, complete: !element.complete } : task
        );
    }}