Reactjs 映射后组件未更新，但请参见数据加载/刷新错误

我用的是React钩子和打字脚本

基本上，我通过useEffect中的服务从API获取数据，通过.then（）设置状态。当我记录这一点的数据时，我可以在控制台中看到它，但是组件没有更新。我是一名经验丰富的开发人员，但还没有完全做出反应

此外，如果我在返回中执行一些愚蠢的操作，比如在加载数据后立即取消包装，将显示一个错误。我猜这是一个我完全看不见的简单错误

代码如下：

import React, { Fragment, useContext, useEffect, useState } from 'react'
import { IFeedItem, IOwlerResponse, OwlerResponse } from '../../../../app/ models/owler'
import FeedItem from './FeedItem';



function formatOwlerResponse(response: any): OwlerResponse { 
    // console.log(response.feeds);
    return { feeds: response.feeds, pagination_id: response.pagination_Id }

}



class ItemService { 

    getItems(url: string): Promise<OwlerResponse> {
        return fetch(
            `https://api.owler.com/v1/feed/url?domain=${url}&format=json&limit=100`,
            {
              method: "GET",
              headers: new Headers({
                   (Redacted)

              })
            })
            .then(res => res.json())
           // .then(res => res.map((response: any) => formatOwlerResponse(response))
            .then(res => formatOwlerResponse(res))
          
            }} 




export const CompanyNewsFeed = () => {
    
    const [url, setUrl] = useState('google.com');
    const [newsItems , setNewsItems] = useState<IFeedItem[]>([])
    const [isLoading, setIsLoading] = useState(true); 
    const client = new ItemService()

    
    
    
    useEffect(()=>{
        client.getItems('google.com').then(r=> {
            console.log(r.feeds)
            setNewsItems(r.feeds); 
        })
        console.log('set')


    }, [url, formatOwlerResponse]);



    return (
        <Fragment>
                        
                 {newsItems.map(item =>{
                     <Fragment key={item.id}>
                        <h1>{item.title}</h1>
                        <p>{item.description}</p>

                     </Fragment>


                 })} 

        </Fragment>
            


        
       

    )
}

export default CompanyNewsFeed 

import React，{Fragment，useContext，useffect，useState}来自“React”
从“../../../../app/models/owler”导入{ifeedeItem，iowlerrresponse，OwlerResponse}
从“./FeedItem”导入FeedItem；
函数formatOwlerResponse（响应：any）：OwlerResponse{
//console.log（response.feed）；
返回{feed:response.feed，分页_id:response.pagination_id}
}
类ItemService{
getItems（url:string）：承诺{
回传(
`https://api.owler.com/v1/feed/url?domain=${url}&format=json&limit=100`，
{
方法：“获取”，
标题：新标题({
（修订）
})
})
.then（res=>res.json（））
//。然后（res=>res.map（（响应：any）=>formatOwlerResponse（响应））
。然后（res=>formatOwlerResponse（res））
}} 
export const CompanyNewsFeed=（）=>{
const[url，setUrl]=useState（'google.com'）；
常量[newsItems，setNewsItems]=useState（[]）
const[isLoading，setIsLoading]=useState（true）；
const client=new ItemService（）
useffect（（）=>{
client.getItems（'google.com'）。然后（r=>{
console.log（r.feeds）
设置新闻项（r.feeds）；
})
console.log（'set'）
}，[url，formatOwlerResponse]）；
返回(
{newsItems.map（项=>{
{item.title}
{item.description}

})} 
)
}
导出默认CompanyNewsFeed

---

更新->我为forceUpdate（）和refresh（）制作了一个按钮当我点击这些按钮时，我得到一个错误，说我可能安装了多个版本的react，这可以解释这种奇怪的行为，因为我看到的教程大多与我的应用程序完全相同。我确实有一段时间在更改依赖项以处理警告，我在16.8、16.14和17.0上的不同点。1或17.1。我也有过Mobx，我花了一天的时间检查它是否正确设置。如果不能解决的话，我会更新。

只需要考虑这些

首先，您将

[url，formatOwlerResponse]

添加为

useffect

依赖项数组，因此如果

变量中没有任何一个不更改，那么您的
api
将只被调用
一次

您需要考虑的另一件事是检查<代码> NeXITEMS 长度，因为您的<代码>映射< /代码>通过它，如果它不是一个数组，它会给您一个错误
return (
      <Fragment>
          { newsItems?.map(item =>{
              <Fragment key={item.id}>
                <h1>{item.title}</h1>
                <p>{item.description}</p>
              </Fragment>
          })} 
      </Fragment>
  )

返回(
{newsItems？.map（项=>{
{item.title}
{item.description}

})} 
)
所以这里的错误实际上不是上述任何一个错误。在一个交互式沙盒中向我的一位朋友展示了这个，在10分钟内他看到了：

             {newsItems.map(item =>{
                 <Fragment key={item.id}>
                    <h1>{item.title}</h1>
                    <p>{item.description}</p>

                 </Fragment>


             })} 

{newsItems.map（item=>{
{item.title}
{item.description}

})} 

应该是

             {newsItems.map(item =>(
                 <Fragment key={item.id}>
                    <h1>{item.title}</h1>
                    <p>{item.description}</p>

                 </Fragment>


             ))} 

{newsItems.map（item=>(
{item.title}
{item.description}

))} 

不敢相信我没有看到它。
不在地图中添加密钥可能会导致地图下方的react更新预防（？有关地图和键的更多信息：以及您得到的错误是什么？我没有得到错误，只是没有更新。在标题中，我是说，如果在加载错误后强制执行错误，则会显示错误，因此会刷新，但html不会更新（？）.Thank@jqueryHtmlCSS，我会检查出来的。谢谢，因为typescript#2不那么重要，因为我们正在强制执行类型，我检查并确保它始终是一个数组，长度为0或100。#1我认为是问题所在。这些依赖关系是一个延迟，但我认为基本上useEffect更新导致了这个问题，我需要重新编写rk我对useffect.Idk的使用，如果这能解决问题，但它可能会。