javascript - useContext 不更新 React 中的状态更改

Question

我已经设法将我的类组件转换为一个允许我使用 useContext 的函数但是，在使用和获取更改时所需的状态时，我有点卡住了。

我有一个名为 input.js 的组件它位于 src/components/input.js

// input.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

import Button from '../components/button';
import { getData } from '../utils/debugger';
import { DropdownContext } from '../utils/DropdownContext';

function InputForm(props) {
  const [loaded, setLoaded] = useState(false);
  const [dropdown, setDropdown] = useState('RTS');
  const [value, setValue] = useState('');
  const [data, setData] = useState([]);

  function queryData(dropdown) {
    return axios({
      method: 'GET',
      url: `http://xxx/debugger/${dropdown}`,
    })
      .then((res) => res.data.map((k) => k['key']['name']))
      .catch((err) => console.error(err));
  }

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleDropdown = async (event) => {
    const value = event.target.value;

    try {
      const newData = await queryData(value);
      setData(newData);
      setDropdown(value);

      if (newData.length > 0) {
        setValue(newData[0]);
      }
      console.log('newData = ' + JSON.stringify(newData));
    } catch (ex) {
      console.error('Could not get data from axios');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  useEffect(() => {
    queryData(dropdown)
      .then((data) => {
        setData(data);
        if (data && data.length > 0) {
          setValue(data[0]);
        }
      })
      .catch(() => {
        setLoaded(false);
      });
  }, []);

  return (
    <form onSubmit={handleSubmit} className='flex items-center'>
      <select
        value={dropdown}
        onChange={handleDropdown}
        className='relative w-full bg-white border border-gray-300 rounded-md shadow-sm px-1 py-3 text-center cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mr-5'>
        <DropdownContext.Provider value={dropdown}>
          <option value='RTS'>RTS</option>
          <option value='RTB'>RTB</option>
          <option value='MPC'>MPC</option>
          <option value='MPC_DSP'>MPC_DSP</option>
        </DropdownContext.Provider>
      </select>

      <select
        value={value}
        onChange={handleChange}
        className='relative w-full bg-white border border-gray-300 rounded-md shadow-sm px-1 py-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mr-5'>
        {data.map((r) => (
          <option key={r} value={r}>
            {r}
          </option>
        ))}
      </select>

      {/* {console.log('---')}
        {console.log('these will be entered into the getData()')}
        {console.log(`this.state.dropdown = ${dropdown}`)}
        {console.log(`this.state.value = ${value}`)} */}

      <Button onClick={() => getData(dropdown, value)} color='green'>
        Generate
      </Button>
    </form>
  );
}

export default InputForm;

该组件在上下文之外工作得很好。现在我想通过 dropdown状态变为App.js

// App.js
import React, {useContext } from 'react';

import './index.css';

import Button from '../src/components/button';

import RTSButtons from '../src/components/rtsButtons';
import RTBButtons from '../src/components/rtbButtons';
import MPCButtons from '../src/components/mpcButtons';

import { DropdownContext } from '../src/utils/DropdownContext';

const sectionStyles = 'mt-5 border-b pb-5';

export default function App() {
  const buttonState = useContext(DropdownContext);

  console.log(buttonState);



  if (buttonState === 'RTS') {
    console.log('RTS');
    return <RTSButtons />;
  } else if (buttonState === 'RTB') {
    console.log('RTB');
    return <RTBButtons />;
  } else if (buttonState === 'MPC') {
    console.log('MPC');
    return <MPCButtons />;
  }

  return (
    <div>
      <section id='response' className={`flex justify-between ${sectionStyles}`}>
        <div>
          <Button color='red'>
            <a href='http://exchange-debugger' target='_blank' rel='noreferrer'>
              create a capture
            </a>
          </Button>
          <Button onClick={() => console.log('Feedback was giving')} color='purple'>
            <a
              href='https://docs.google.com/forms/d/e/1FAIpQLSfzebOfAeXqGLqAp5E1l2fW1nTqSzYRwpqKG56HPXey9GQLcA/viewform'
              target='_blank'
              rel='noreferrer'>
              feedback
            </a>
          </Button>
        </div>
      </section>

      <section>{buttonState}</section>
    </div>
  );
}

我有一个 util 文件如下:

import { createContext } from 'react';

export const DropdownContext = createContext('RTS');

我现在真的不知道把我的 <DropdownContext.Provider value={dropdown}> 放在哪里为了获得正确的值，以便我能够将其传递给 App.js。我看过一些教程，显示它被放置在其他组件周围......我只想将状态传递到另一个文件中，让该状态在全局范围内可用。

任何帮助都会很棒，我觉得我很接近但到目前为止。

Answer 1

这是 useContext 的通用方法。假设您有一个文件 context.js:

import { createContext, useContext, useState } from 'react';

// No need to export this, we'll create custom hook around it
const SomeCtx = createContext();

// Custom hook, returns array with state, setter
export const useSomeCtx = () => useContext(SomeCtx);

// Convenience hook so you don't have to destructure
// everywhere, returns read-only state
export const useSomeCtxState = () => {
    const [state] = useContext(SomeCtx);
    return state;
};

// Provider, goes in render tree above components where you
// import/use the accessor hooks above.
export const SomeCtxProvider = ({children, init}) => {
    const myCtx = useState(init); // [myCtxState, setMyCtxState]
    return <SomeCtx.Provider value={myCtx}>{children}</SomeCtx.Provider>;
};

然后在你的 index.js 中:

import {SomeCtxProvider} from './context.js';
// other stuff

// Setting at the root makes the context globally visible, you
// may want to apply the principle of least privilege
// and put this further down in the render tree.
ReactDOM.render(<SomeCtxProvider><App /></SomeCtxProvider>, someDOMElement);

然后在你的 App.js 中

import {useSomeCtx} from './context.js';
function App() {
  const [state, setState] = useSomeCtx(); // or state = useSomeCtxState()
  // whatever
}

现在您可以像往常一样更改状态，任何使用您提供的 Hook 的组件都将重新呈现并获取最新状态。您可以将 setter 连接到所需的任何事件监听器(例如单击按钮)。

请注意，与将整个应用程序状态保存在一个巨大对象中的旧模式不同，您并不仅限于一种上下文。根据上面的模式，您可以拥有不同的上下文和它们自己的自定义 Hook ，并让它们在您放置提供程序的渲染树中的任何位置可用(在我给出的示例中，它位于根目录，因此在这种情况下无处不在) .

另请注意，就其强大程度而言，这是非常简短和甜蜜的，整个应用程序中的任何组件都可以通过导入和使用上面定义的自定义 Hook 来访问它，并将自动重新呈现如果它改变了。您可能需要更加小心地分发 setter，这就是我包含只读 Hook 的原因:全局变量是邪恶的。尽管如果您有一个如此复杂的应用程序，您可能应该使用 useReducer 和调度操作而不是 useState。