Question

我正在获取数据并将结果存储在状态“数据”中，然后将此“数据”发送到函数“ Showingmovies”，在这里我正在使用表格标签来对齐我的布局。但是，这些元素并未从“ Showingmovies”函数进行渲染，我发现道具已经成功传递给了该函数，但仍未渲染。

下面是我的完整代码-

 import React, { Component } from 'react'

 function Showingmovies(props){
 console.log("in showingmovies",props.mov)
 return(
 <table>
  <tbody>
   {props.mov.results.map((mv) =>{
     <tr>
         <td>
         <p>image here</p>
         </td>
         <td>

         {mv.original_title}
         <p>{mv.overview}</p>

         </td>
     </tr>


   })}
  </tbody>
 </table>
 )}

 export default class movie extends Component {
  constructor(){
   super()
   this.state={
       data: [],

   }
   }
 componentWillMount(){
   fetch("https://api.themoviedb.org/3/search/movie? 
         api_key=ab85c167dc8f5538f5b6e08f01923243&query=J")
   .then((res) =>res.json())
   .then((data) => this.setState({
       data: data,
   }))
 }


 render() {

 return (
   <div>
     <p>hi i will show you movies</p>
    {this.state.data.length !== 0 ?
     <Showingmovies mov = {this.state.data}/>:null}

   </div>
 )
 }
 }

Answer 1

您需要在map方法中将return添加为

 function Showingmovies(props){
 return(
 <table>
  <tbody>

   {props.mov.results.map((mv) =>{
     return (
     <tr>
         <td>
         <p>image here</p>
         </td>
         <td>

         {mv.original_title}
         <p>{mv.overview}</p>

         </td>
     </tr>

     )
   })}
  </tbody>
 </table>
 )}

Answer 2

问题是返回

解决方案 每当您使用map时，如果您使用

之类的`{}，则必须使用return

{props.mov.results &&
          props.mov.results.map(mv => {
            return <tr>
              <td>
                <p>image here</p>
              </td>
              <td>
                {mv.original_title}
                <p>{mv.overview}</p>
              </td>
            </tr>;
          })}

如果您不想返回，请像

那样删除{}

{props.mov.results && props.mov.results.map(mv => 
   <tr>
     <td>
        <p>image here</p>
     </td>
     <td>
       {mv.original_title}
       <p>{mv.overview}</p>
       </td>
 </tr>)
}

codeSandbox

元素未在React中呈现

2 个答案: