Question

一个组件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组件时，会传递2个值：首先是未定义的值，然后是value出现时，然后是带有值的数组。

在“ 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上没有任何内容。我不知道该如何处理。请提出一些建议。

Answer 1

您面临的问题是您没有渲染任何内容（本身）cos 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;

ReactJs ---向孩子发送道具会导致孩子的渲染出现问题。 UI呈现未发生“ NewsLatest.js”

1 个答案: