反应上下文传递时间每秒发生无限循环

Question

对不起，我是 React 的新手，所以我遇到了一个问题，我的上下文为其他组件提供了时间。当我仅将其与显示时钟的组件一起使用时，一切都很好。问题发生在另一个组件中，我想根据一天中的时间显示消息。重新渲染太多。React 限制渲染的数量以防止无限循环。

我的上下文组件

import React, { createContext, useState, useEffect } from "react";
import moment from "moment";
export const GreetingContext = createContext();
const getTime = () => {
return moment();
};
const GreetingContextProvider = (props) => {
const [currentTime, setCurrentTime] = useState(getTime);

const setTime = () => {
setInterval(() => {
setCurrentTime(getTime);
}, 1000);
return () => {
clearInterval(setTime);
};
};
useEffect(setTime, []);
return (
<GreetingContext.Provider value={currentTime}>
{props.children}
</GreetingContext.Provider>
);
};
export default GreetingContextProvider;

和我的消息组件

import React, { useState, useContext} from "react";
import { useLocalStorage } from "../custome_hooks/useLocalStorage";
import { GreetingContext } from "../contexts/GreetingContext";
const Greeting = () => {
const time = useContext(GreetingContext);
const timeInHours = time.hours();
const [greeting, setGreeting] = useState("ooo");
const [name, setName] = useLocalStorage("name", "Your name");

// Setting the greeting depending on the time of the day
switch (true) {
case timeInHours > 0 && timeInHours < 5:
setGreeting("Good night");
break;
case timeInHours > 5 && timeInHours < 12:
setGreeting("Good morning");
break;
case timeInHours > 12 && timeInHours < 17:
setGreeting("Good day");
break;
case timeInHours > 17 && timeInHours < 24:
setGreeting("Good evening");
break;
default:
setGreeting("");
}

// Getting the name of the user
let handleChange = (e) => {
setName(e.target.value);
};
return (
<div className="greeting_container">
<h4>{greeting}</h4>
<input
type="text"
size={name.length + 1}
value={name}
onChange={handleChange}
/>
</div>
);
};
export default Greeting;

谢谢

Answer 1

好的，我通过将我的 Switch(( 传递到带有第二个参数的 useEffect 钩子中解决了这个问题，我已经添加到消息组件中。

useEffect(() => {
switch (true) {
case timeInHours > 0 && timeInHours < 5:
setGreeting("Good night");
break;
case timeInHours > 5 && timeInHours < 12:
setGreeting("Good morning");
break;
case timeInHours > 12 && timeInHours < 17:
setGreeting("Good day");
break;
case timeInHours > 17 && timeInHours < 24:
setGreeting("Good evening");
break;
default:
setGreeting("");
}
}, [timeInHours]);

这样组件就不会每秒更新一次，并且仅在 timeInHours 变量更改的情况下更新。

Answer 2

我认为你的问题是你开始setInterval的useEffect

它应该是：

useEffect(() => {
setTime()
}, []);

此外，当您更新时间时，您应该调用该函数。

setCurrentTime(getTime()); // <-- add () to getTime
// same for useState
useState(getTime());

编辑：

我知道这以另一种方式回答了你的问题，但我仍然让你成为一个钩子而不是上下文：

import { useState, useEffect } from 'react';
import moment from 'moment';
const getTime = () => moment();
export default () => {
const [currentTime, setCurrentTime] = useState(getTime());
const setTime = setInterval(() => {
setCurrentTime(getTime());
}, 1000);
useEffect(() => {
return () => clearInterval(setTime);
}, [])
return currentTime;
}

并正常使用它：const currentTime = useTime()