我的React UI没有更新，虽然改变状态

Question

我试图根据状态的变化来改变我的反应UI，我使用true和false状态，但是当我使用onClick处理程序添加更改状态时，状态会发生变化，因为我添加了console.log来记录状态变化，但我的UI没有更新，此时我不知道我做错了什么。

这是我在

下面尝试的这是我的状态声明文件，我想把我的逻辑从UI中分离出来

import { useState } from "react";
const datasetViewToggle = () => {


const [datasetViewToggleState, changeDatasetViewToggle] = useState(false);
return {
datasetViewToggleState,
changeDatasetViewToggle
};
};
export default datasetViewToggle; 

这是我实现onClick处理程序

return ( < div className = "w-[250px] h-[300px]" onClick = {() => {changeDatasetViewToggle(true);
console.log(datasetViewToggleState);
}
}>

这是我需要根据State更改的UI屏幕

import React from 'react';
import DatasetGrid from './components/DatasetGrid';
import { FaPlus } from 'react-icons/fa';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import datasetViewToggle from '../hooks/DatasetView';
import DatasetViewScreen from './components/DatasetViewScreen';
import { useState } from "react";


function DatasetScreen() {
const { datasetViewToggleState, changeDatasetViewToggle } = datasetViewToggle();
return (
<>
{datasetViewToggleState == true && (
<p>
View Page
</p>
)}
{datasetViewToggleState == false && (
<DatasetGrid/>
)}


</>
)

}

export default DatasetScreen

Answer 1

我想我可以添加评论中的答案

你的点击处理程序是如何与DatasetGrid组件使用的?自定义钩子不是全局状态。如果你将datasetViewToggle钩子导入到两个不同的组件中，你将拥有两个具有两种独立状态的钩子。——亚当。2天前

我的点击处理程序只是简单地改变在数据集网格组件导入的钩子的状态为真，我检查了，它的工作，但正如你所说，我的其他屏幕根本没有看到变化，因为自定义钩子不是全局状态，我如何实现我在这里寻找什么?我应该添加全局状态管理像redux或有一个更简单的解决方案，谢谢- Macphail Magwira昨天

是的，如果组件是完全独立的，你不能轻易地在它们之间传递道具，你应该考虑Redux。——亚当。K 22 hours ago