授予用户访问权限以在 reactjs 中编辑网站名称和其他前端参数的最佳方法是什么？

Question

我正在构建一个博客网络应用程序。我正在使用 nodejs、reactjs 和 mongodb。我正在尝试创建一个系统，管理员可以在其中编辑他们的博客名称、颜色、标题图像、侧边栏图像和内容，而无需联系我的开发人员。 我从博客名称开始。我使用 input 和 react useState 并创建按钮来处理这种名称更改。默认情况下，欢迎使用博客名称，但是当用户管理员单击编辑模式按钮时，会显示输入框，用户可以在此处输入首选名称并单击更新以更新它。这一直有效，直到我重新加载页面并且名称返回到默认状态“欢迎”。 我在想，实现这一目标的最佳方法是什么？我是使用本地存储还是必须从服务器加载站点名称？或者有没有办法做到这一点，这样当您重新加载网络应用程序时，它不会返回到默认状态，而是保持保存的姓氏？我正在研究 WordPress 用户如何编辑其网站的前端参数并保存它们。

这是我的代码：

 const [EditHeaderTitleMode, setEditHeaderTitleMode] = useState(false) //this actives the edit mode
 const [writeHeaderTitle, setWriteHeaderTitle] = useState('Welcome') //this is the default name of the site.

 return (
    <>
    
 <Dashboard setEditHeaderTitleMode={setEditHeaderTitleMode}/>
    <div className='header'>
      
        <div className='headerTitles'>

            {EditHeaderTitleMode ? <input type="text"
            onChange={(e) => setWriteHeaderTitle(e.target.value)}

            />: <span className='headerTitleSm' >{writeHeaderTitle}</span>}
            <span className='headerTitleLg'>Tech World</span>
        </div>
     
    </div>
    </>
)

}

Answer 1

当您刷新或重新加载您的网页时，您的组件状态将重置为您设置的默认值“欢迎”。为避免这种情况，请从数据库中获取 writeHeaderTitle 并将 writeHeaderTitle 设置为数据库。