Question

我创建了一个简单的帖子应用程序，用于使用React显示一些帖子。

当应用程序加载时，我正在进行API调用并显示一些帖子。之后，当用户单击这些帖子中的任何一个时，将显示该帖子的详细摘要。

我面临的问题是加载微调器：

当用户点击帖子时：在 componentWillReceiveProps 内部，我将状态更改为旋转：true ，当我从API获取有关帖子的详细数据时，我进行了更改旋转的状态：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

只要id prop不是空字符串if(nextProps.id)或true，此null总是返回undefined。因此，即使id属性更改，它仍然保留true。

一种解决方案是将id属性保存到孩子的状态，并与来自父级组件的ID属性进行比较。

componentWillRecieveProps已过时，不安全（unsafe componentWillRecieveProps）。相反，您可以使用getDerivedStateFromProps或memoization

ReactJS中的微调器问题

1 个答案: