反应 UseEffect 不渲染答案

【问题标题】：React UseEffect Not Rendering反应 UseEffect 不渲染
【发布时间】：2022-08-19 00:25:14
【问题描述】：

我正在尝试使用 useEffect 从状态进行简单的渲染，但出现空白，尽管 useEffect 正在检索数据并且两次！（虽然我只要求它渲染一次并且它不会被更新）..

Json 数据文件（提取）\'moviedetails.json\'：

[
    {
        \"Movie\": {
            \"RegionId\": 1,
            \"TitleId\": 1,
            \"Title\": \"13 Hours: The Secret Soldiers of Benghazi\",
            \"TitleYear\": 2016,
            \"Summary\": \"On Sept. 11, 2012, Islamic militants attack the U.S. Consulate in Benghazi, Libya, killing Ambassador J blah blah.\"
        },
        \"Scenes\": [
            {
                \"SceneId\": 2,
                \"LocationSiteId\": 108,
                \"LocationPlaceName\": \"Valletta\",
                \"LocationSiteName\": \"Liesse Il-Belt\",
                \"Latitude\": 35.89615,
                \"Longitude\": 14.5136
            },
            {
                \"SceneId\": 474,
                \"LocationSiteId\": 108,
                \"LocationPlaceName\": \"Valletta\",
                \"LocationSiteName\": \"Liesse Il-Belt\",
                \"Latitude\": 35.89615,
                \"Longitude\": 14.5136
            },
etc etc...
}
]

和.js文件...

import { Container } from \"react-bootstrap\";
import Row from \'react-bootstrap/Row\';
import Col from \'react-bootstrap/Col\';
import { Link, useParams } from \"react-router-dom\";
import { useEffect, useState } from \"react\";
import Movies from \'../data/moviedetails.json\'

const MovieDetails = () => {

    const { id } = useParams()
    const [movie, setMovie] = useState([])       

    
    useEffect(() => {
        if (loadingMovie) {
            return
        }

     const filteredMovieDetails =   Movies.filter(moviedetail => moviedetail.Movie.TitleId == id)
             setMovie ( filteredMovieDetails )
        console.log ( filteredMovieDetails) // gets array but runs twice!              

    },[]);// Only needs to run once
    
    
    return (  

// RETURNS BLANK!   
        
        <Container> 
            <Row>

         <h1>{movie.Title}</h1>        
        </Row>            
         
       <Row>        
        <article>
           {movie.Summary}
        </article>
        </Row>      
                  
        </Container>
    )
}
export default MovieDetails;

在这个阶段我只是想展示电影。标题和电影。总结尽管状态 \'movies\' 具有正确的数据，但没有返回任何内容。我认为这与 \'async\' 有关，并且 useEffect 在 return 语句之后运行？

你能把它更新为一个可运行的minimal reproducible example 来演示吗？乍一看，您似乎只是在什么是数组和什么是单个对象之间混淆了自己。在名称中一致地使用复数形式很重要。

标签： reactjs use-effect

【解决方案1】：

您的状态值是一个数组：

const [movie, setMovie] = useState([])

所以这不会渲染任何东西：

<h1>{movie.Title}</h1>

因为一个数组没有Title 财产。

如果您希望结果是一个数组，请渲染该数组的元素：

return (
  <>
    {movie.map(m => (
      <Container> 
        <Row>
          <h1>{m.Title}</h1>        
        </Row>            
        <Row>        
          <article>
           {m.Summary}
          </article>
        </Row>      
      </Container>
    ))}
  </>
);

和将您的变量重命名为复数所以很明显它是一个数组。

或者，如果您希望它是单个对象，将其更改为对象：

const [movie, setMovie] = useState();

并将其更新为一个对象：

const filteredMovieDetails = Movies.find(moviedetail => moviedetail.Movie.TitleId == id);

并且仅在有要渲染的对象时有条件地渲染对象：

return (
  {
    movie ?
      <Container> 
        <Row>
          <h1>{movie.Title}</h1>        
        </Row>            
        <Row>        
          <article>
           {movie.Summary}
          </article>
        </Row>      
      </Container> :
      <Container>No movie found!</Container>
  }
);

【讨论】：

谢谢您的帮助。我正在使用“数组选项”，但现在出现以下错误......“警告：列表中的每个孩子都应该有一个唯一的“关键”道具”我尝试在每个标签处添加“TitleId”作为关键，并且一个 div，但我认为错误来自“场景”，所以我也尝试了 m.Scenes.SceneId。它基本上是一个经典的“主/细节”页面（场景（细节）将在我修复电影（主）部分后添加）。您认为将两个单独的 json 文件分别用于 master 和 detail 会更好吗？
@KevinM：我怀疑在这种情况下（至少对于此处显示的.map()），唯一需要key 的元素是<Container>。如果我们只是迭代“电影”，那么电影的任何唯一标识符都应该有效。从数据中我怀疑是TitleId，但您可以在调试中确认。

【解决方案2】：

管理排序。我需要第二个“地图”功能来显示“细节”……

return (
        <>
          {/* 'Master' */}
           {movie.map((m) => {            
            return(               
               <Container key={m.TitleId}>
                 <h2>{m.Title}</h2>     

                   {/* 'Detail' */}
                 {m.Scenes.map((s) => {
                  return (
                     <row key={s.SceneId}>
                         { s.LocationSiteName }
                        </row>
                        );
                     })}         
                    
                   </Container>
                 );
               })}
             </>
           );  

   @David : Thanks again for your help

【讨论】：

【解决方案3】：

关于上述还有另一件事......

为什么 useEffect 运行 4 次而不是它只需要运行一次？

【讨论】：