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块中，但我很确定你不能在UseInterval中嵌套UseEffect，因为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>