如何更新 State React Hooks？

Question

我是 React 的新手，我尝试学习钩子。 我可能有一个基本问题，但我不明白为什么。 我确定了一个钩子 state 但我无法更新它。

我的代码：

function Top(props) {

const [URL, setURL] = useState();
const [Category, setCategory] = useState();

const { handleSubmit, handleChange } = useFormik({
    initialValues: {},
    onSubmit: values => {
        clickCrawlButton(values)
    },
});

const clickCrawlButton = (values) => {
        fetch(props.baseURL + "/reddit_top", requestOptionsPost)
        .then(response => response.json())
        .then(result => {
            setURL(result) // Why did not it work ?
            props.setInfoText("Crawl Process Started ...")
        }).catch(error => console.log('error', error));
}
return (
   <div>
     {URL}
   </div>
);

额外的信息：

我打印到控制台，但尽管 state 没有更新，结果打印到控制台。

Answer 1

在setData之后控制台Data时，您确实犯了错误。 setData异步工作，当您控制台数据时，它尚未更新。

//incorrect
setData(result);
console.log("Result data" + Data);

您可以使用依赖项检查useEffect中的Data更改。

//correct
const clickCrawlButton = (values) => {
    fetch(props.baseURL + "/reddit_top", requestOptionsPost)
    .then(response => response.json())
    .then(result => {
        setData(result)
        props.setInfoText("Crawl Process Started ...")
    }).catch(error => console.log('error', error));
}

useEffect(() => {
     console.log("Result data" + Data);
}, [Data])