React：在使用上下文时在与上下文声明相同的文件中设置值时遇到问题

Question

我正在修复项目中正在进行的一些道具钻探。我的 app.js 目前每 5 秒查询一次数据库健康状况，并为一些变量定义上下文。我在从上下文中获取 setter 时遇到问题。

App.js（提供商方）：

ConnectionContext=React.createContext({})

const App = () => {
    const [isConnectedtoDB,setConnectedtoDB]=useState({isConnected:{}});
    const setConnected=useContext(ConnectionContext)
    useInterval(() => {
        const health = (await health.get()).data
        if(Date.now() - health.connection.time_last_message > 10000){
            setConnected({isConnected:false})
        } else{
            setConnected({isConnected:health.connection.alive})
    },5000)

navbar.js（消费者端）：

const NavBar = () =>{
    const {isConnected}=useContext(ConnectionContext)
    return (
        {isConnected ? &&
            <p>I'm alive!</p>
        })

我在网上看到一种解决方案是将设置包装在 UseEffect 块中，但我相当确定您不能将 UseEffect 嵌套在 UseInterval 中，因为 UseInterval 本身是由 UseEffect 块定义的。 useInterval 从另一个文件导出如下：

export const useInterval = (callback,delay) => {
    const savedCallback = useRef()
    useEffect(() => {
        function tick() {
            savedCallback.current()
        }
        if (delay !== null) {
            let id = setInterval(tick,delay)
            return () => clearInterval(id)
        }
    },[delay]}
}

我得到的错误是 setConnected 不是函数

Answer 1

您正在使用父组件中的上下文，它只是为消费者提供价值

setConnected 应该是您的本地状态

const [connected, setConnected] = useState({});

您需要将父级（提供者）的状态值提供给子级（消费者）。

示例:

Parent.js

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

export const ExampleContext = createContext();

function Parent(props){
    
   const [isConnected, setConnected] = useState({})


   useInterval(() => {
        const health = (await health.get()).data;

        if(Date.now() - health.connection.time_last_message > 10000){
            setConnected({isConnected:false})
        } else{

            setConnected({isConnected:health.connection.alive})
    },5000)

   return (
       <ExampleContext.Provider value={{ isConnected }}>
            {props.children}
       </ExampleContext.Provider>
   )
}

export default Parent;

Child.js

import React, {useContext} from 'react';
import {ExampleContext} from './Parent';


function Child(){
    const { isConnected } = useContext(ExampleContext);

    return(
        <div>
            {<button> Context in Action: { isConnected } </button>}
        </div>
    )
}

export default Child;

在您的主 App.js 文件中，您将 child.js 渲染为 parent.js

的子级

  <Parent>
      <Child />
   </Parent>

React：在使用上下文时在与上下文声明相同的文件中设置值时遇到问题

React: Having issues with using contexts with setting the value in the same file as the context declaration

javascript

reactjs

react-context