Question

我编写了此组件，我需要拉长followers数组的长度，以显示每个用户在其个人资料中有多少个Followers。 fetchUser（）调用后端API。我使用Redux并重新选择。

import MessageList from "../containers/MessageList";
import UserAside from "./UserAside";
import { connect } from 'react-redux';
import { fetchUser } from "../store/actions/users";
import { selectFetching,selectUserToCheckProfile } from '../store/selectors'
import { createStructuredSelector } from "reselect";

class Profile extends Component {

    componentDidMount() {
        const { fetchUser } = this.props;
        fetchUser(this.props.match.params.userId)
    }
    render() {
        const {fetching,userToCheckProfile}=this.props
        console.log(userToCheckProfile)
       const followers=userToCheckProfile.followers.length
     

        return (
            <div className="row">
                <MessageList userToVisit={this.props.match.params.userId} {...this.props} />
               {
                   !fetching? <UserAside
                   {...this.props}  userToCheckProfile={userToCheckProfile}
               />:'waiting.....'
               }
            </div>
        )
    }
}

const mapStateToProps=state=>createStructuredSelector({
    fetching:selectFetching,
    userToCheckProfile: selectUserToCheckProfile

})
const mapDispatchToProps = dispatch => ({
    fetchUser: (id) => dispatch(fetchUser(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(Profile);

我收到此错误！ TypeError：无法读取未定义的属性“ length”

这是我在控制台中的对象！

userToCheckProfile.messages.length和userToCheckProfile.messages [0]也会产生相同的错误！

{messages: Array(1), followers: Array(0), _id: "5f89b7e4f877294944d8d706", email: "kanye@kanye.com", username: "kanye", …}
email: "kanye@kanye.com"
followers: []
messages: ["5f89b856f877294944d8d707"]
password: "$2b$10$jSP28GIBMWirGuMBf4sp/eTBXgsT3MgRT/yfoxQBN9o69aPeDUeie"
profileImageUrl: ""
username: "kanye"
__v: 1
_id: "5f89b7e4f877294944d8d706"
__proto__: Object}

Answer 1

import MessageList from "../containers/MessageList";
import UserAside from "./UserAside";
import { connect } from 'react-redux';
import { fetchUser } from "../store/actions/users";
import { selectFetching,selectUserToCheckProfile } from '../store/selectors'
import { createStructuredSelector } from "reselect";

class Profile extends Component {

    componentDidMount() {
        const { fetchUser } = this.props;
        fetchUser(this.props.match.params.userId)
    }
    render() {
        const {fetching,userToCheckProfile}=this.props
        console.log(userToCheckProfile)
        const followers=(userToCheckProfile && userToCheckProfile.followers && userToCheckProfile.followers.length) || 0;
     

        return (
            <div className="row">
                <MessageList userToVisit={this.props.match.params.userId} {...this.props} />
               {
                   !fetching? <UserAside
                   {...this.props}  userToCheckProfile={userToCheckProfile}
               />:'waiting.....'
               }
            </div>
        )
    }
}

const mapStateToProps=state=>createStructuredSelector({
    fetching:selectFetching,
    userToCheckProfile: selectUserToCheckProfile

})
const mapDispatchToProps = dispatch => ({
    fetchUser: (id) => dispatch(fetchUser(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(Profile);

无法在反应渲染方法中读取未定义的属性“长度”

1 个答案: