为什么我的文档标题属性没有更新？答案

【问题标题】：Why isn't my document title property being updated?为什么我的文档标题属性没有更新？
【发布时间】：2020-12-14 17:48:14
【问题描述】：

在我的项目中，当我通过 API 获取数据后无法更改 document.title（文档的标题）时。我的代码如下：

useEffect(() => {
        loadData();
        console.log(name)
        document.title = `${name}`
    }, []);

const loadData= async () =>  {
axios.get('https://api.themoviedb.org/3/movie/' + props.match.params.id + '?api_key=***').then(
            res=>{
                setName(res.data.title)}

 
        )}

但是，console.log 确实正确显示了名称。如何解决这个问题？

【问题讨论】：

标签： reactjs react-hooks frontend backend use-effect

【解决方案1】：

要根据名称的更改来更改标题，您可以创建一个单独的useEffect 挂钩并将name 放入依赖数组中。

React.useEffect(() => {
  document.title = name;
}, [name]);

【讨论】：

【解决方案2】：

这里你在useEffect中使用了[] only watcher，这段代码只会渲染一次，如果你想改变document.title也请修改代码

useEffect(() => {
document.title = name
},[name])

[name] 这意味着只要状态改变，这个 useEffect 就会触发

【讨论】：