为什么我在初始化后更新我的 JSX 时视图没有更新？答案

【问题标题】：Why does the view not update when I update my JSX after initialization?为什么我在初始化后更新我的 JSX 时视图没有更新？
【发布时间】：2021-11-06 10:45:23
【问题描述】：

我是 JSX 的初学者，我需要使用生命周期来防止从 primereact 加载编辑器时出现一些错误。

但是，为了让这个例子更简单，我想在初始化之后更新一些字符串值并在我的视图中看到它。

这是我的尝试：

let displayText = '<div>Hello World!</div>';

useEffect(() => {
    displayText = '<div>Bye World!</div>;
}, []);

return (<div>{displayText}</div>)

当我运行它时，我只看到“Hello World！”。但我希望看到“再见世界”，因为变量已更新。这里发生了什么？我怎样才能做到这一点？

【问题讨论】：

尝试在此处修复开始的 div 标签：displayText = '>div>Bye World!</div>;。我不确定这是否能解决您的问题，但需要解决。
啊谢谢，我只是把代码写下来而不是复制它
但这不在我的代码中^^
return (<div>{displayText}</div>) 这将产生 2 组 div 标签。试试return ({displayText})
看来您需要useState 来更改您的文字。

标签： javascript html reactjs jsx

【解决方案1】：

如果您希望更新导致渲染，您不能只分配一个变量。在道具更改或状态更改后触发渲染。尝试将变量转换为状态：

const [displayText, setDisplayText] = useState('<div>Hello World!</div>');

useEffect(() => {
    setDisplayText('<div>Bye World!</div>);
}, []);

return (<div>{displayText}</div>)

这样，第一次渲染后，效果会触发，状态会发生变化，并以新的值再次渲染。

useState 文档：https://reactjs.org/docs/hooks-reference.html#usestate

此外，您将呈现字符串 <div>Hello World!</div>，而不是 HTML div 元素。

【讨论】：