当useState()变化时如何渲染React函数组件？

12 浏览
0 Comments

当useState()变化时如何渲染React函数组件？

我有一个非常简单的功能组件，从localStorage获取日期并显示它。我有两个按钮，用于添加或删除日期的周数，并且我期望显示新的日期。然而，组件没有被渲染。

代码如下：

import React, { useState } from "react";

import { monthList } from "../common/lists";

const Navbar = () => {

const [focusDate, setFocusDate] = useState(

Number(localStorage.getItem("focusDate"))

);

const [month] = useState(new Date(focusDate).getMonth());

const [year] = useState(new Date(focusDate).getFullYear());

const onLeftClick = () => {

setFocusDate(focusDate - 504000000); //一个星期

localStorage.setItem("focusDate", focusDate);

};

const onRightClick = () => {

setFocusDate(focusDate + 504000000);

localStorage.setItem("focusDate", focusDate);

};

return (

{`${monthList[month]} ${year}`}

);

};

这个组件的预期行为是获取时间戳，然后显示该时间戳的月份和年份。当加载时，它正确显示为2021年1月，但是当我多次点击onLeftClick时，它不会渲染组件，虽然我期望它显示为2021年12月。计算是正确的，我认为我在这里缺少功能组件渲染的概念。这对于类组件来说会更容易，但我也想学习功能组件。我在这里错过了什么？

0

2 答案

0 Comments

问题的出现原因：在React函数组件中，当使用useState()来管理状态时，如何在状态发生改变时重新渲染组件。

解决方法：

可以通过在函数组件中使用useState()来管理状态，并根据状态的变化来重新渲染组件。下面是一个示例代码：

import React, { useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    

      
Count: {count}

      
    

  );
};
export default MyComponent;

在上面的示例中，我们使用useState()来定义一个名为count的状态变量，并使用setCount()来更新count的值。当点击按钮时，调用handleClick函数来增加count的值，并重新渲染组件。

通过使用useState()，我们可以在函数组件中轻松地管理状态，并在状态发生改变时重新渲染组件。这使得React函数组件更加灵活和易于使用。

0
0 Comments

问题出现的原因是，setFocusDate方法是异步的，所以在调用setFocusDate之后立即更新本地存储时，不能期望本地存储包含新的focusDate值。这是因为setFocusDate方法被React调度但尚未执行。

解决方法是使用useEffect钩子来更新本地存储。在useEffect的第二个参数中传入focusDate，这样当focusDate发生变化时，useEffect会被触发，从而更新本地存储。

代码示例：

useEffect(() => {
  // 在focusDate发生变化后，更新本地存储的代码
}, [focusDate]);

此外，你还可以使用一个专门的hook来将本地存储与组件状态同步，比如这个例子：[https://usehooks.com/useLocalStorage/](https://usehooks.com/useLocalStorage/)。

0