useContext 不更新 React 中的状态变化

我已经设法将我的类组件转换为一个允许我使用 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。我看过一些教程,显示它被放置在其他组件周围......我只是想将一个状态传递到另一个文件中,让该状态在全球范围内可用。

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

stack overflow useContext not updating on state change in React
原文答案
author avatar

接受的答案

这是 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
}

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

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

另请注意,这对于它的强大功能来说非常简短和甜蜜,整个应用程序中的 any 组件可以通过导入和使用上面定义的自定义钩子来访问它,并且如果它发生更改将自动重新渲染。您可能希望在分发 setter 时更加小心,这就是我包含只读挂钩的原因:全局变量是邪恶的。尽管如果您有一个复杂的应用程序,您可能应该使用 useReducer 和调度操作而不是 useState


答案:

作者头像
  • 最好为 consuming components 应用上下文 API

  • 看看您的提交操作。有两种方法可以追求。

    1. onSubmit 在表单元素上

    2. onClick 通过 type="submit" 在表单内的按钮元素上

似乎您在使用上述方法之一提交后没有发送任何内容。一探究竟。

作者头像

您也可以通过状态更改函数和 App.js 中的 useState 将状态向上传递。然后您可以将状态传递给其他组件。

作者头像

enter image description here

如上图所示,如果将整个对象放入一个新对象中,则 react 永远不会触发更改。

确保触发更改,以便 react 认为有一些更改并将触发更改响应到 Co​​ntext API。

我强烈建议创建一个新对象并在该新对象中一一添加,然后最后添加到上下文中。

作者头像

enter image description here

正如您在上面的快照中看到的,我使用了两个不同的文件并从另一个文件获取上下文并从另一个文件更新该上下文。