时间戳

首页 > 解决方案 > ReactJs --- 向儿童发送道具导致儿童渲染出现问题。UI 渲染未发生“NewsLatest.js”

reactjs - ReactJs --- 向儿童发送道具导致儿童渲染出现问题。UI 渲染未发生“NewsLatest.js”

问题描述

一个组件 Landing.js 具有以下代码：

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;

当向 NewsLatest 组件发送 props 时，传递了 2 个值：首先是未定义的，然后当值到达时，然后是一个包含值的数组。

在“NewsLatest.js”文件中的代码是:::

import React, { Component } from 'react';
// import PropTypes from 'prop-types';

class NewsLatest extends Component {
   newsTitle = (
    this.props.newsList.map(item => (<h2>{item.title}</h2>))
  )
  render() {
    console.log(this.props.newsList);
    return (
      <div>
         <h2>News Latest....</h2>
         {this.newsTitle}
      </div>
    );
  }
}


export default NewsLatest;

UI 上没有呈现任何内容。我不知道如何处理。请提出一些建议。

标签： reactjs

解决方案

你面临的问题是你没有渲染任何东西（本身）因为newsTitle没有返回任何东西。在您的代码中，newsTitle是一个对象，但您需要将其设为函数。

修改NewsLatest应该可以解决这个问题

import React, { Component } from 'react';
// import PropTypes from 'prop-types';

class NewsLatest extends Component {
   newsTitle = () => (
    this.props.newsList.map(item => (<h2>{item.title}</h2>))
  )
  render() {
    console.log(this.props.newsList);
    return (
      <div>
         <h2>News Latest....</h2>
         {this.newsTitle()}
      </div>
    );
  }
}


export default NewsLatest;

推荐阅读