React Js News API 数据未获取 Show .map 错误

Question

在我的新闻搜索应用程序中，我从 app.js 页面中的 API 接收数据，并将数据作为道具传递给组件。 app.js 文件中的数据将显示在控制台日志中，但在未找到新闻组件数据中。 这是错误。

我尝试越来越多，我在 app.js 中创建了一个数组并通过，但结果相同。

Uncaught TypeError: news.map is not a function
    at NewsList (NewsList.jsx:58:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
    at renderRootSync (react-dom.development.js:26390:1)
    at recoverFromConcurrentError (react-dom.development.js:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25706:1)

这是 app.js 代码

import React from 'react';
import Header from './component/Header';
import { newsCategory } from './news';
import NewsList from './component/NewsList';
import Pagination from './component/Pagination';
import Loading from './component/Loading';
import axios from 'axios';

class App extends React.Component {

  state = {
    news: []

  }

  componentDidMount() {
    const url = `${process.env.REACT_APP_NEWS_API_URL}?apikey=${process.env.REACT_APP_NEWS_API_KEY}&category=technology&pageSize=5`;
    axios.get(url)
    .then(response => {  
      this.setState({ news: response.data.articles });
     console.log(response.data.articles);
    })
    .catch(error => {
      console.log(error);
    } 
    );
  }
  render ()
  
   {
    return(
      <div className="container">
        <div className="row">
          <div className="col-sm-6 offset-md-3">
           <Header category={newsCategory.technology} ></Header>
           <div className='d-flex'>
             <p className='text-black-50'>
               About {0} result found 
             </p>
             <p className='text-black-50 ml-auto'>
               {1} page of {100}
             </p>
           </div>
           <NewsList news={this.state.news} />
           <Pagination></Pagination>
           <Loading></Loading>
          </div>
        </div>
      </div>
      
    )
  }
 
}

export default App;

这是 NewsList.js

import React from 'react'

function getDate(dateTimestr) {
    return new Date(dateTimestr).toDateString;
}
const NewsItem = ({ item }) => (
    <div className='card my-2'>
        {item.urlToImage && (<img
            src={item.urlToImage}
            alt={item.title}
            className='card-img-top'
        />)}
        <div className='card-body'>
            <a
                href={item.url}
                target='_blank'
                rel='noopener noopener'
                style={{ color: '#424242' }}
            >
                <h5 className='card-title'>{item.title}</h5>
            </a>
            <a
                href={item.url}
                target='_blank'
                rel='noopener noopener'
                style={{ color: '#424242' }}
            >
                {item.content}

            </a>
            <div className='mt-2 d-flex aligh-items-center'>
                <small>
                    <strong>
                        Publish at {getDate(item.publishedAt)}
                    </strong>
                </small>
                <div
                    style={{
                        padding: '0.25rem 0.50rem',
                        background: '#ededed',
                        color: '#424242',
                        borderRadius: '0.25rem',
                        display: 'inline-block'
                    }}
                    className='ml-auto'
                >
                    <small>{item.source.name}</small>
                </div>
            </div>
        </div>
    </div>
)
function NewsList(news) {
    return (
      
        <div>
            {console.log(news)}
            {news && news.length === 0 && <h4>THere is no News</h4>}
            {news && news.map(item => <NewsItem key={item.title} item={item} />)}
        
        </div>
    )
}
export default NewsList

Answer 1

您需要将 NewsList 从这个：NewsList(news) 更改为这个：NewsList({news})