ReactJs

Question

我在 ReactJs 中使用 useState() 有问题。我想设置我的变量，但我的 console.log return 我什么都没有：

const [selectedMinister, setSelectedMinister] = useState("");

const handleChange = (event) => {
    console.log(event.target)
    let selectM = event.currentTarget.getAttribute("data-minister_name");
    setSelectedMinister(selectM);
    console.log(selectedMinister);

};


<List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
    {listMiniters.map((c) => (
        <ListItem
            key={c.label}
            disablePadding
            onClick={handleChange}
            data-minister_name={c.label}
        >
            {/* my code */}
    ))}
</List>

您知道问题出在哪里吗？

Answer 1

setSelectedMinister(selectM);

是一个异步操作。你可能想在 useEffect 中记录你的状态，当你的状态改变时它会被调用（如果你把你的状态放在依赖数组中）

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

Answer 2

状态变化只会反映在下一个渲染事件上（也就是在你的 handleChange 函数运行之后，React 决定 re-run 函数组件的主体。在那之前，您可以访问 selectM，因此如果您只在该函数的上下文中需要它，那么从 setState 函数获取状态没有额外的好处：

const handleChange = (event) => {
    console.log(event.target)
    let selectM = event.currentTarget.getAttribute("data-minister_name");
    setSelectedMinister(selectM);
    // console.log(selectedMinister);
    console.log(selectM) => it will be fine.
};

状态变化很快就会发生，问题是你真正需要改变状态的原因是什么，因为到目前为止似乎根本没有必要设置状态。

我预测你可能想要这样的东西：

<div>{selectedMinister}</div>

在您的渲染函数中：这将起作用，或者如果您需要在该 handleChange 函数中发出 API 请求，您也可以这样做：

const [selectedMinister, setSelectedMinister] = useState("");
const [ministerBio, setMinisterBio] = useState();

const handleChange = async (event) => {
    console.log(event.target)
    let selectM = event.currentTarget.getAttribute("data-minister_name");
    setSelectedMinister(selectM);
    const res = await fetch(`/api/ministers?name=${selectM}`)
    const json = await res.json();
    setMinisterBio(json);
};

如果你真的想具体 console.log 直接来自州的 selectedMinister 名称，你可以 useEffect 按照其他答案（MWO）的建议，或者如果你使用老派 this.setState(selectedMinister) 您可以在该方法中使用回调：this.setState(selectedMinister, console.log)。在 React 设置中，newState 不会立即运行，它将在下一次渲染时出现。

ReactJs - useState - 不会改变我的价值

ReactJs - useState - doesn't change my value

material-ui

use-state