React - 状态不通过上下文更新

Question

我正在尝试 show/hide 我页面上的一个组件使用上下文中的状态，该上下文被页面上的一个组件更改。我的页面上有一个文件上传框，当上传有效文件时，我想在页面上显示一个元素，但我似乎根本无法让它工作。谁能看出我做错了什么？

看起来分派正在更新状态值（如下面的浏览器调试器所示），但是 Dashboard.js 页面上的状态似乎没有更新。

index.js

...
import Provider from './Helpers/Provider'

ReactDOM.render(
  <BrowserRouter>
    <Provider>
      <App /> 
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

Dashboard.js

import { useDropzone } from 'react-dropzone';
import TileGrid from '../Components/TileGrid';
import MyDropzone from '../Components/Dropzone';
import React, { useState, useEffect } from 'react';
import { Context } from '../Helpers/Provider';

export default function Dashboard() {

  const [currentTime, setCurrentTime] = useState(0);
  const [state, dispatch] = useState(Context);

....

  return (
      <div>
          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white mr-2">Upload a PCAP file to analyse</h5>
          <p>Accepted file types: .pcap, .pcapng, .tcpdump</p>
      </div>
      <div class="mt-5 lg:ml-2 lg:mt-0 md:mt-0">
          <MyDropzone/> // File upload component
      </div>

      <div>
          <p>{state.pcapUploaded}</p> // Should show 'false' by default, does not show at all
          { state.pcapUploaded ? <TileGrid tiles={tiles}/> : null } // Trying to get this item to show if a file has been uploaded, and not if no file has been uploaded
      </div>
  );
}

Dropzone.js（这里试图把状态改成'true'）

import { useCallback, useEffect, useContext } from 'react';
import { useDropzone } from 'react-dropzone';
import { Context } from '../Helpers/Provider';

export default function MyDropzone() {

    const [state, dispatch] = useContext(Context);

    function PcapUploaded() {
      alert("hi");
      dispatch({            // Trying to update the state in context to have a value of 'true' here
          type: 'UPLOADED',
          payload: true,
      });
    }

    const onDrop = useCallback(acceptedFiles => {
      // Do something with the files
      // alert(acceptedFiles[0].name);
      PcapUploaded();
    }, [])
.....

Provider.js

import { createContext, useReducer } from "react";
import Reducer from "../Reducer";

export const Context = createContext();

const initalState = {
    pcapUploaded: false,
}

export default function Provider(props) {
    const [state, dispatch] = useReducer(Reducer, initalState);
    return (
    <Context.Provider value={[state, dispatch]}>
        {props.children}
    </Context.Provider>
    );
}

Reducer.js

export default function Reducer(state, action) {
    switch(action.type) {
        case 'UPLOADED':
            return {
                pcapUploaded: true,
            };
        default:
            throw new Error();
    }
}

我一直在关注这个指南：https://remarkablemark.org/blog/2021/03/21/managing-react-state-with-context/

谢谢

Answer 1

https://codesandbox.io/s/state-not-updating-through-context-98zlz6

请检查我的 codesandbox 是否包含您代码的工作版本。您的代码中的类型存在一些错误，而且您在应该使用 useContext 的地方使用了 useState。

Answer 2

在你Dashboard.js尝试

const [state, dispatch] = useContext(Context)

而不是

const [state, dispatch] = useState(Context)

React - 状态不通过上下文更新

React - State not updating through context

javascript

state

reactjs