React hooks 组件在映射后未更新，但查看数据加载/刷新错误答案

【问题标题】：React hooks component not updating after map, but see data loading / refreshing with errorReact hooks 组件在映射后未更新，但查看数据加载/刷新错误
【发布时间】：2021-04-15 11:47:21
【问题描述】：

我正在使用 React 钩子和 Typescript。

基本上，我通过 useEffect 中的服务从 API 获取数据，通过 .then() 设置状态。当我从这一点记录数据时，我可以在控制台中看到它，但组件没有更新。我是一位经验丰富的开发人员，但对 React 完全陌生。

另外，如果我做一些愚蠢的事情，比如在加载数据后将{newsItems} 放入解包的返回中，则会显示错误。我猜这是一个简单的错误，我只是视而不见。

代码如下：

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

更新 -> 我为 forceUpdate() 和 refresh() 创建了一个按钮，当我点击这些按钮时，我收到一个错误，说我可能安装了多个版本的 react，这会导致奇怪的行为，因为我'看过的教程大多与我的应用程序一模一样。我确实有一段时间正在更改依赖关系以处理警告，并且我在 16.8、16.14 和 17.0.1 或 17.1 上处于不同的位置。我也安装了 Mobx，我花了一天时间检查它是否设置正确。如果不能解决，会更新。

【问题讨论】：

未在地图中添加键可能是导致反应更新阻止的原因
像就在 map(?
有关地图和密钥的更多信息：stackoverflow.com/questions/64268908/… 和 stackoverflow.com/questions/60710716/… 和 stackoverflow.com/questions/63064061/…
您遇到了什么错误？
我没有收到错误，只是没有更新。在标题中，我是说如果我在加载后强制出错，则会显示错误，因此它会刷新但 html 没有更新（？）。谢谢@jqueryHtmlCSS，我去看看。

标签： reactjs typescript react-router react-typescript

【解决方案1】：

只需要考虑这些

首先你将[url, formatOwlerResponse] 添加为useEffect 依赖数组，所以如果variables 没有一个不改变，那么你的api 只会被称为once。

您需要考虑的另一件事是检查newsItems 的长度，因为您的mapping 通过它，如果它不是一个数组，它会给您一个错误

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

【讨论】：

感谢，因为 typescript #2 不是问题，因为我们正在强制执行类型，我确实检查并确保它始终是一个数组，长度为 0 或 100。 #1 我认为是问题所在。这些依赖关系是一个保留，但我认为基本上是 useEffect 更新导致了这个问题，我需要重新使用 useEffect。我想知道这是否能解决问题，但它可能会。

【解决方案2】：

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

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

                 </Fragment>


             })}

应该是

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

                 </Fragment>


             ))}

不敢相信我没看到。

【讨论】：