методы жизненного цикла не работают должным образом

Question

Я хочу проверить, следует ли пользователь за текущим пользователем или нет.Я запускаю эту функцию в 'componentDidMount'.Но я получаю следующую ошибку:

UserProfile.js: 29 Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'includes' of undefined

Согласно документам, componentdidmount срабатывает после 1-говизуализации.здесь я должен получить значение в 1-м рендере через componentWillMount.Но этого не происходит.

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import axios from 'axios';
import PostListItem from './PostListItem';
import {getUser, addFollower, addFollowing, removeFollower, removeFollowing} 
from '../actions/user';
class UserProfile extends React.Component{
constructor(props){
    super(props);
     this.state = {
        user:'',
        isFollowed: false
    } 
}

componentWillMount(){
    console.log(this.props.match.params._id);
    axios

.get(`http://localhost:5000/api/user/${this.props.match.params._id}`)
        .then(res => {
            console.log(res.data);
            this.setState({user: res.data});
            this.props.dispatch(getUser(res.data));
        }); 
}

componentDidUpdate(){
    if(this.state.user.following.includes(this.props.currentUser.uid)){
        this.setState({isFollowed: true});
    }
}


render(){
    return(
        <div>
            <div>
                <div className="User-description">
                  {this.state.user.avatar}
                  <img src={this.state.user.avatar} alt= 
{this.state.user.name}/>
                </div>
                {(this.props.currentUser.uid === this.state.user._id) ?
                    <Link to={`/${this.state.user._id}/edit`}>Edit 
Profile</Link> :
                    <button 
                    onClick={this.onFollow}>
                    {this.state.isFollowed? 'Following': 'Follow'}
                </button>
                }
            </div>
)
}

const mapStateToProps = (state) =>{
console.log(state);
 return{ 
     currentUser: state.auth
    // user: state.user.find(user => user._id === props.match.params._id)
 }
};  

export default connect(mapStateToProps)(UserProfile);

Answer 1

Помните, ниже приведено асинхронное вычисление в вашем коде:

axios.get(`http://localhost:5000/api/user/${this.props.match.params._id}`)
        .then(res => {
            console.log(res.data);
            this.setState({user: res.data});
            this.props.dispatch(getUser(res.data));
        }); 

Ваш обработчик обещаний будет устанавливать состояние в конце концов, когда будут обработаны остальные события в очереди. Здесь componentDidMount() или componentDidUpdate() выполняется сразу после render(). Ваш обработчик then не выполнялся до этого момента, и поэтому user.following не установлен в вашем состоянии. Попробуйте поставить галочку, если поле following существует, тогда продолжайте, потому что в конечном итоге оно будет установлено:

componentDidUpdate(){

    if(this.state.user.following && this.state.user.following.includes(this.props.currentUser.uid)){
        this.setState({isFollowed: true});
    }
}

Answer 2

Проверьте user и following перед использованием includes:

if(this.state.user && 
   this.state.user.following.includes(this.props.currentUser.uid)){