未应用 ReactJS 样式且返回值不正确

Question

console.log(handler)在第一次执行时返回处理程序值，而不是！handler

import React, { useState } from "react";
function Listitem(props) {
const [handler, setHandler] = useState(true);
function changeHandler(event) {
setHandler(prev => !prev);
console.log(handler);
}
return (
<li
onClick={changeHandler}
style={{ textDecroration: !handler ? "line-through" : "none" }}
>
{props.text}
</li>
);
}
export default Listitem;

Answer 1

CSS 属性中有拼写错误。这textDecoration不是textDecroration.

这是你另一个console.log问题的答案。

从文档中：

setState(( 不会立即改变 this.state，但会创建一个 挂起的状态转换。调用此状态后访问此状态 方法可能会返回现有值。没有 保证对 setState 的调用的同步操作，并且调用可能 进行批处理以提高性能。

对于钩子，

钩子不支持第二个回调参数。执行端 效果渲染后，在组件体中声明useEffect().

useEffect(() => {
console.log(number);
}, [number]);