React 不会在状态更改时重新渲染

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时，它的样式不会改变。

从类似的问题中，我了解到使用spread对象调用setIsActive()会触发重新渲染。

Answer 1

Jan. 我认为没有必要每个声明。

试图这样做。

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

这应该会有所帮助。