React中调用useState的setBlogs报非函数错误如何解决

你写错了useState的接收语法：useState 返回的是数组，第一个元素是状态值，第二个是状态更新函数，你用了对象解构的大括号{}去接返回值，根本拿不到正确的setBlogs方法，调用时自然会报「setBlogs is not a function」的错误。

• 首先把useState的对象解构改成数组解构，把大括号换成方括号：

// 错误写法
// const { blogs, setBlogs } = useState([{postId:"",blogCity:"",blogTitle:"",username:"",time:""}]);

// 正确写法
const [blogs, setBlogs] = useState([{postId:"",blogCity:"",blogTitle:"",username:"",time:""}]);

• 调整useEffect依赖项：setBlogs是React官方保证引用稳定的方法，不需要放到依赖数组里，属于冗余依赖。另外你在调用setBlogs之后立刻打印blogs拿不到最新值是正常现象，React的状态更新是异步批处理的，不会在执行完set代码后立刻同步更新状态值，要查看更新后的结果可以单独加监听。

修正后的相关代码参考：

useEffect(() => {
  fetchProfileImage();
  fetchPost();
  getBlogs();
  // 移除多余的setBlogs依赖，如果blogs变化不需要重新触发请求，也可以把blogs从依赖里删掉，避免重复拉取接口
}, [postImage])

const getBlogs = async()=>{
  const response = await fetch(
    `http://localhost:5000/api/post/getPost/${username}`, {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
        'auth-token': localStorage.getItem("token")
      }
    });
  const json = await response.json();
  console.log("接口返回的博客数据：", json.result);
  // 建议这里加个格式判断，确保传给setBlogs的是数组，避免后续渲染报错
  if(Array.isArray(json.result)){
    setBlogs(json.result);
  }
}

// 监听blogs变化，打印更新后的值
useEffect(() => {
  console.log("已存入状态的博客数据：", blogs);
}, [blogs])

内容的提问来源于stack exchange，提问作者user17048286