ReactJS -- 无法从 API 中找到导致错误的最新标题

Question

我有一个着陆组件和一个新闻最新组件。我正在点击一个 api 并试图找到具有最新时间戳的文章，但我无法在 reactJS 中完成它.我检查了 js 代码它的工作正常，但在 react 中它没有渲染。请提出一些建议。

import React, { Component } from 'react'
import NewsSearch from '../NewsSearch/NewsSearch';
import NewsLatest from '../NewsLatest/NewsLatest';
import './Landing.css';
import axios from 'axios';

class Landing extends Component {
state={
newsList: []
}
componentDidMount(){
axios.get(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=7cK9FpOnC3zgoboP2CPGR3FcznEaYCJv`)
.then(res=> {
this.setState({newsList: res.data.results});
});
}
render() {
// console.log(this.state.newsList);
return (
<div className="landing text-center text-white">
<h1>News Portal</h1>
<div className="news-search">
<NewsSearch />
</div>
<div className="news-latest">
<NewsLatest newsList={this.state.newsList}/>
</div>
</div>
)
}
}
export default Landing;

import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
constructor(props){
super(props);
this.state = {
newsTitle:'',
abstract:'',
newsUrl:'',
}
// this.newsLatest = this.newsLatest.bind(this);
}

newsLatest = (e)=>{
// e.preventDefault();
const {newsList} = this.props;
let maxTime = newsList.map(function(o) { 
return new Date(o.updated_date);  
});
let maximumValue = Math.max(...maxTime);
let latestnews = newsList.filter(function (el) {
return maximumValue === new Date(el.updated_date).getTime();
})[0];
if(latestnews){
this.setState({newsTitle: latestnews.title});
return (<h4>{this.state.newsTitle}</h4>);
}
}
newsTitle = () => (
this.props.newsList.map(item => (<h2 key={item.title}>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsLatest()}
</div>
);
}
}

export default NewsLatest;

在新闻最新组件中呈现时存在一些问题。好建议点什么。

Answer 1

试试这个：

您可能一定会遇到最大深度错误，请改用生命周期方法，例如componentDidUpdate。仅当以前的 props 与较新的 props 不同时，才更新组件状态。

在此处阅读更多内容： https://reactjs.org/docs/react-component.html

import React, { Component } from "react";
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
constructor(props) {
super(props);
this.state = {
newsTitle: "",
abstract: "",
newsUrl: ""
};
// this.newsLatest = this.newsLatest.bind(this);
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.newsList !== this.props.newsList) {
const { newsList } = this.props;
let maxTime = newsList.map(function(o) {
return new Date(o.updated_date);
});
let maximumValue = Math.max(...maxTime);
let latestnews = newsList.filter(function(el) {
return maximumValue === new Date(el.updated_date).getTime();
})[0];
this.setState({ newsTitle: latestnews.title });
}
}
// newsLatest = e => {
//   // e.preventDefault();
//   const { newsList } = this.props;
//   let maxTime = newsList.map(function(o) {
//     return new Date(o.updated_date);
//   });
//   let maximumValue = Math.max(...maxTime);
//   let latestnews = newsList.filter(function(el) {
//     return maximumValue === new Date(el.updated_date).getTime();
//   })[0];
//   console.log(latestnews)
//   if (latestnews && latestnews.hasOwnProperty('length') && latestnews.length>0) {
//     return <h4>{this.state.newsTitle}</h4>;
//   }
// };
newsTitle = () =>
this.props.newsList.map(item => <h2 key={item.title}>{item.title}</h2>);
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
<h4>{this.state.newsTitle}</h4>
</div>
);
}
}
export default NewsLatest;

另外，沙盒：https://codesandbox.io/s/hungry-frog-z37y0?fontsize=14