Проблема Spinner в ReactJS

Question

Я создал простое почтовое приложение для отображения некоторых сообщений с помощью React.

Когда приложение загружается, я выполняю вызов API и отображаю некоторые сообщения.После этого, когда пользователь нажимает на любой из этих сообщений, отображается подробное резюме сообщения.

Проблема, с которой я сталкиваюсь, заключается в загрузке счетчика:

Когда пользователь нажимает на сообщение: внутри componentWillReceiveProps Я меняю состояние на spinning: true , и когда я получаю подробные данные от API о публикации, я меняю состояние на spinning: false .Однако мой счетчик работает только тогда, когда я впервые нажимаю на сообщение, после этого он не работает.

FULLPOST.js

import React, { Component } from 'react';
import axios from 'axios';
import Spinner from '../../components/Spinner/Spinner';
import './FullPost.css';

class FullPost extends Component {
    state ={
        loadedPost: null,
        spinning: false
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.id){
           this.setState({
            spinning: true
           })
        }

    }
    componentDidUpdate(){
        if(this.props.id){
            axios.get("/posts/" + this.props.id).then( response => {
               if(!this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== this.props.id)){
                   setTimeout(function(){
                    this.setState({
                        loadedPost: response.data,
                        spinning: false
                    }) 
                   }.bind(this)
                   ,2000)
               }     
            })
        }
    }
    render () {
        let post;
        if(!this.props.id){
            console.log("1")
             post = <p style={{textAlign: "center"}}>Please select a Post!</p>;
        }
        else{
            console.log("2")
            post = <Spinner /> 
        }
        if(this.props.id){
            console.log("3")
            if(this.state.loadedPost){
                console.log("4")
                post = (
                    <div className="FullPost">
                        <h1>{this.state.loadedPost.title}</h1>
                        <p>{this.state.loadedPost.body}</p>
                        <div className="Edit">
                            <button className="Delete">Delete</button>
                        </div>
                    </div>
                );
            }
        }
        return post;
    }
}

export default FullPost;

Может кто-нибудь сказать, что я здесь упускаю иЯвляется ли componentWillReceiveProps хорошим местом для изменения моего состояния, если нет, то где я должен изменить свое состояние, чтобы спиннер работал при каждом щелчке пользователя.

Answer 1

Это if(nextProps.id) всегда возвращает true, пока id prop не является пустой строкой, null или undefined.Таким образом, даже когда изменяется id id, он все равно остается true.

Решение состоит в том, чтобы сохранить реквизит id в состояние вашего ребенка и сравнить с поступающим реквизитом id из родительского компонента.

componentWillRecieveProps устарел и считается небезопасным ( небезопасный componentWillRecieveProps).Вместо этого вы можете использовать getDerivedStateFromProps или памятка