每次渲染都没有更新内容[关闭]答案

【问题标题】：NOT getting updated content with every render [closed]每次渲染都没有更新内容[关闭]
【发布时间】：2021-09-17 09:43:20
【问题描述】：

我是 Next.js 的新手。我遇到了一个问题，我无法在页面上加载我的新内容。 Next.js 不断显示我已经删除的旧内容 /em> 来自代码。为什么会显示之前的内容？

这是我删除的最后一个代码，但它仍然显示在 chrome 的源选项卡上。

export const UploadWrapper = () => {
    // const img__isClicked = ;
    const img__isClicked = useSelector(state => state);

    useEffect(() => {
        console.log('uploadWrapper', img__isClicked);
    }, [img__isClicked])

    return (
        <section>
            <UploadDropzone />
            {(img__isClicked) ? console.log('hurray I got you') : null }
        </section>
    )
}

这是页面上未显示的更新代码：

export const UploadWrapper = () => {
    // const img__isClicked = ;
    const img__isClicked = useSelector(state => state.img__isClicked);

    useEffect(() => {
        console.log('uploadWrapper', img__isClicked);
    }, [img__isClicked])

    return (
      <>
        <section>
            <UploadDropzone />
        </section>
        <aside>
            {(img__isClicked === true) ? <TagsWrapper /> : null }
        </aside>
      </>
    )
}

如果我想看到新鲜的内容，那么我必须重新启动整个服务器。

控制台向我显示的事件

我找到你了

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

这是因为当您不更改组件内部的状态时，不会发生新的渲染。您可以像这样创建 imgClicked 状态：

export const UploadWrapper = () => {
  const [imgClicked, setImageClicked] = useState(false);
  const img__isClicked = useSelector(state => state.img__isClicked);

  useEffect(() => {
    setImageClicked(img__isClicked); // <--- This state change will trigger re-render of the component.
  }, [img__isClicked])

  return (
    <>
      {imgClicked ? <TagsWrapper /> : null}
    </>
  )
}

【讨论】：