не реагирует на изменение состояния

Question

У меня есть этот функциональный компонент:

const PriorityInput = () => {
  const [isActive, setIsActive] = useState({
    taskPriorityLow: false,
    taskPriorityMedium: false
  });

  const onPriorityClick = name => {
    Object.keys(isActive).forEach(key =>
      key === name ? setIsActive({ ...isActive, [key]: true }) : setIsActive({ ...isActive, [key]: false })
    );
  };

  return (
     <div className="task-priority-input-container">
        <label className="task-priority-input-label">Priority</label>
        <span
          className={
            isActive.taskPriorityLow
              ? "task-priority-button task-priority-low-active"
              : "task-priority-button task-priority-low"
          }
          onClick={() => onPriorityClick("taskPriorityLow")}
        >
          LOW
        </span>
<span
          className={
            isActive.taskPriorityLow
              ? "task-priority-button task-priority-medium-active"
              : "task-priority-button task-priority-medium"
          }
          onClick={() => onPriorityClick("taskPriorityMedium")}
        >
          MEDIUM
        </span>
      </div>
  );
};

export default TaskForm;

, однако, когда я нажимаю на span, его стиль не меняется.

Из аналогичных вопросов я понял, что вызов setIsActive() с распространенный объект вызовет повторное рендеринг.

Answer 1

Январь Я думаю, что нет необходимости в выражении foreach.

, пытаясь сделать так.

const PriorityInput = () => {
  const [isActive, setIsActive] = React.useState({
    taskPriorityLow: false,
    taskPriorityMedium: false,
    taskPriorityHigh: false,
  });

  const onPriorityClick = name => {
    console.log("clicked - ", name);
    const updateActive = {...isActive};
    Object.keys(isActive).forEach(key => {
      if(key === name)
        updateActive[key] = true;
      else
        updateActive[key] = false;
    });
    
    setIsActive(updateActive);
  };

  return (
     <div className="container">
        <label className="input-label">Priority</label>
        <span
          className={
            isActive.taskPriorityLow
              ? "btn btn-primary"
              : "btn btn-secondary"
          }
          onClick={() => onPriorityClick("taskPriorityLow")}
        >
          LOW
        </span>
        <span
          className={
            isActive.taskPriorityMedium
              ? "btn btn-primary"
              : "btn btn-secondary"
          }
          onClick={() => onPriorityClick("taskPriorityMedium")}
        >
          MEDIUM
        </span>
        <span
          className={
            isActive.taskPriorityHigh
              ? "btn btn-primary"
              : "btn btn-secondary"
          }
          onClick={() => onPriorityClick("taskPriorityHigh")}
        >
          HIGH
        </span>
      </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<PriorityInput />, rootElement);

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

вместо этого

Object.keys(isActive).forEach(key =>
  key === name ? setIsActive({ ...isActive, [key]: true }) : setIsActive({ ...isActive, [key]: false })
);

напрямую вы можете написать

setIsActive({ ...isActive, [name]: true }) 

, это должно помочь.