使用 useState 和 useEffect 钩子响应更新页面的 H1 状态显示答案

【问题标题】：React updating display of a page's H1 state with useState and useEffect hooks使用 useState 和 useEffect 钩子响应更新页面的 H1 状态显示
【发布时间】：2020-12-17 15:25:09
【问题描述】：

在阅读了 useState 和 useEffect 的文档后，我无法弄清楚我在这里做错了什么...我尝试在单击选项卡时使用更新的标题动态更新我的 h1 标题，但是状态不会更新所以我的标题不会重新呈现。

这是我的子标题组件，它接收一组对象作为道具。这些对象被迭代并用于填充子导航栏。（按预期工作）。

const Subheader = (props) => {
    const {
        submenuItems = []
    } = props;

    // State
    const  [pageTitle, setPageTitle] = useState(submenuItems[0].name); //Sets starting value as the first item of my submenu which is also the default route so works as intended.

    const handleMenuItemClick = (name) => {
            setPageTitle(name)
            console.log(name) //This prints out the updated expected value
            console.log(pageTitle) //This prints out the original not updated value

    }

    const submenuItemsJSX = submenuItems.map((item, index) => {
        return (
                <li
                key={index}
                to={item.to}
                onClick={() => handleMenuItemClick(item.name)}
                >
                  <a>
                    {item.name}
                  </a>
                </li>
        )
    });

    useEffect(() => {
      console.log(pageTitle) //This prints out the original not updated value
    }, [pageTitle])


    return (
      <div>
        <div>
          <h1>
            {pageTitle}  //This is what i want to update
          </h1>
        </div>
        <div>
          <ul>
            {submenuItemsJSX}
          </ul>
        </div>
      </div>
    )
}

export default Subheader

通过 subMenuItems 输入的示例：

{name: 'Categories', to: '/settings/categories', buttons: [] }

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately
还注意到const [selected?它根本无法更改，因为它是 const。
const 没问题，请检查如何在反应钩子中使用状态 - reactjs.org/docs/hooks-state.html @EmileBergeron
您对console.log 的困惑是否只有@William 的评论涵盖...或者您实际上对打印的pageTitle 值有一些问题？
然后pageTitle 将在渲染中更新。

标签： reactjs react-hooks use-effect use-state

【解决方案1】：

setSelectedMenuItem和setPageTitle是异步方法，不能在setSelectedMenuItem()和setPageTitle()之后立即获取selected和pageTitle的更新值。

您应该使用useEffect 来检查更新的值并添加依赖项。

useEffect(() => {
  console.log(selected)
}, [selected])

useEffect(() => {
  console.log(pageTitle)
}, [pageTitle])

【讨论】：

是的，但是他如何能够从 useEffect 挂钩获取更新的值到 JSX？他需要在 JSX 中动态显示它，而不仅仅是从 useEffect 控制台记录它。
@Jeton 这是自动完成的，这就是 useEffect 知道值已更改的方式。
@EmileBergeron 我知道，但 Cheekumz 的问题是，它也没有在 JSX 中更新，不仅仅是 console.log 它。
@Jeton 当威廉写下他的答案时，OP 的问题并不清楚（现在仍然不清楚）。 OP 没有提供可重现的示例，因此问题中显示的代码可能完全不相关。
@EmileBergeron 在我最近的编辑中试图澄清

【解决方案2】：

您的代码似乎是正确的。问题一定出在其他地方。我创建了一个codesandbox demo，一切正常。

【讨论】：

谢谢，它并没有帮助解决我的问题，但它说服了我继续努力而不是找到替代解决方案，因为这是我的首选路线。

【解决方案3】：

您是否尝试在声明 pageTitle 时将空字符串 '' 传递给 useState？对于值的初始化，您可以使用 useEffect 挂钩。

const [pageTitle, setPageTitle] = useState('');

useEffect(() => {
  setPageTitle(submenuItems[0].name)
})

【讨论】：