React 渲染不正确

Question

更改我的 ID (/movie/:id) 时，我将重新渲染我的整个组件。有时我必须在我的喜欢上单击 3 或 4 次才能进行更改，有时我只需单击一次（但我落后了一个组件）。这是我的代码：

import React from "react";
import "../styles/DetailFilm.css"
import {Link} from 'react-router-dom';
const API_IMAGES = 'https://image.tmdb.org/t/p/w500';


class DetailFilm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
                    id: props.movie_id,
            info: {},
            recommandation: []
        }
    }
    componentDidMount() {
        const fetchData = async () => {
            //fetch api
            this.setState({info: data,recommandation:data_recommandation_spliced })
        }
        fetchData();
        

    }
    componentWillReceiveProps(nextProps) {
        console.log("RENDERING" + nextProps.movie_id)
        const fetchData = async () => {
            // fetch api

            this.setState({id: nextProps.movie_id,info: data,recommandation:data_recommandation_spliced })
            console.log("Rendered" + nextProps.movie_id)
        }
        fetchData();
    }
    render()  {
        return (
            //css
                    {this.state.recommandation.map((movie) => 
                        <Link to={`/movie/${movie.id}`}>
                            <img src = {API_IMAGES + movie.poster_path} className="image-movie-genre"/>
                        </Link>
                    )}
        )
    }

}
export default DetailFilm;

感谢您的帮助！

Answer 1

从数组中添加 JSX 元素时，每个元素都需要一个唯一的 key 属性，以便 React 可以跟踪 DOM 中的必要更改。您需要向 Link 元素添加键，以便 React 知道要更新它们。

Answer 2

我找到了一个解决方案，这不是我最初想要的解决方案。我从使用 Class 更改为使用 useEffect avec id 作为参数的函数。

React 渲染不正确

React not rendering properly

javascript

reactjs

react-router

react-component