React调用REST接口报Cannot read properties of undefined (reading 'map')错误

• 初始状态与接口返回结构不匹配：news的初始值设为空数组[]，组件首次渲染时接口请求尚未完成，此时访问news.results会得到undefined，对undefined调用map方法会直接抛出 Cannot read properties of undefined (reading 'map') 类型错误。
• 渲染值类型错误：接口返回的results数组中每一项都是对象，直接将对象作为JSX子元素插入<h1>标签，会触发React的 Objects are not valid as a React child 错误。
• 副作用依赖缺失：useEffect依赖数组未包含路由参数pk，当pk变化时不会重新拉取对应内容，会一直展示首次请求的数据。
• 列表项缺少必填key属性：循环渲染列表时没有给节点加唯一key，会触发React渲染警告，极端场景下会出现渲染错乱。

const NewsComponent = () => {
    const params = useParams()
    const pk = params.pk
    // 初始值对齐接口返回结构，保证首次渲染时results是可遍历的数组
    const [news, setNews] = useState({
        count: 0,
        next: null,
        previous: null,
        results: []
    })

    useEffect(() =>{
        const getNews = async() => {
            try {
                const response = await httpClient.get(`/feed/${pk}`)
                setNews(response.data);
            } catch (err) {
                // 可在此处补充请求失败的错误处理逻辑
                console.error('获取新闻失败:', err)
            }
        }
        getNews();
    }, [pk]) // 补全依赖，pk变化时自动重新请求

    return(
        <div>
            {news.results.map((post, index) =>(
                // 给列表项加key，实际业务优先用post自带的唯一id代替index
                <div key={post.id || index}>
                    {/* 渲染对象里的具体字段，不要直接渲染整个对象 */}
                    <h1>{post.title}</h1>
                    <p>{post.text}</p>
                </div>
            ))}
        </div>
    )
}

• 可以新增loading状态，请求过程中展示加载提示，避免页面空白
• 接口请求增加错误兜底，请求失败时给用户展示对应提示
• 列表渲染的key属性优先使用数据自带的唯一标识，不要长期使用数组下标，避免列表增删、排序时出现渲染异常

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