盡管更改了 state，但我的 React UI 沒有更新

Question

我正在嘗試根據 state 中的更改更改我的 React UI，我使用的是 true 和 false 狀態，但是當我使用 onClick 處理程序添加更改 state 時，state 發生更改，因為我添加了一個 console.log 來記錄 state更改但我的用戶界面沒有更新，此時我不知道我做錯了什么。

這是我在下面嘗試的

這是我的 state 聲明文件，我試圖將我的邏輯與 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 掛鈎導入到兩個不同的組件中，您將擁有兩個具有兩個獨立狀態的掛鈎。 – adam.k 2 天前

我的點擊處理程序只是將數據集網格組件中導入的掛鈎的 state 更改為 true，我檢查過它正在工作，但正如你所說，我的其他屏幕根本看不到變化，因為自定義掛鈎不是全局狀態，怎么辦我實現了我在這里尋找的東西？ 我應該添加全局 state 管理，如 redux 還是有更簡單的解決方案，謝謝 – Macphail Magwira 昨天

是的，如果組件是完全獨立的並且你不能輕易地在它們之間傳遞道具，你應該考慮 Redux。 – adam.k 22 小時前