React集成Contentful报错：无法设置仅含getter的createClient属性

你遇到的Cannot set property createClient of #<Object> which has only a getter报错，根本原因是代码里的语法错误，和getter/setter无关，具体问题及修正如下：

错误点1：错误的函数调用写法 #

你创建Contentful客户端时，错误地使用了赋值语法：

const client = createClient=({
  space:"xxxxxxxxx",
  access_token:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
})

这里createClient=({...})是试图给导入的只读createClient函数重新赋值，所以触发了只读属性的报错。正确写法是调用函数：

const client = createClient({
  space:"xxxxxxxxx",
  accessToken:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
})

另外注意：Contentful的参数名是accessToken（驼峰格式），不是access_token，这个错误会导致后续请求失败。

错误点2：useEffect的错误赋值写法 #

你把useEffect写成了赋值形式：

useEffect=(()=> { ... })

正确写法是直接调用useEffect：

useEffect(()=> { ... }, [])

修正后的完整代码 #

import React from 'react'
import { useState, useEffect } from 'react'
import { createClient } from 'contentful'

// 正确创建客户端
const client = createClient({
  space:"xxxxxxxxx",
  accessToken:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
})

function App() {
  const [blog, setBlog] = useState([])

  useEffect(()=> {
    const fetchBlogPosts = async () => {
      try{
        // 统一用async/await，避免混用then
        const entries = await client.getEntries()
        console.log(entries);
        setBlog(entries.items) // 实际文章数据在entries.items数组中
      } catch (err){
        console.log(err)
      }
    }
    fetchBlogPosts()
  }, [])

  return (
    <div>App</div>
  )
}

export default App

额外提示 #

• 不要混用async/await和.then()，保持代码风格统一，也更易维护。
• getEntries()返回的结果里，实际的文章数据存放在entries.items数组中，直接存储整个entries对象到state通常不是需求。

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