我已将我的 ProfileComponent.js 与Redux存储区连接,然后使用该状态 渲染用户图像,但是当我刷新页面时,我收到此TypeError信息,当我执行控制台检查时,似乎我的组件在作为道具可用之前正在使用用户状态(在Profile道具中基本上为null),但这不应该发生对吧?
当我省略<img />
元素时,似乎第一次我的用户为null,第二次我的用户使用props更新时,我的个人资料被渲染两次。谁能告诉我发生了什么事?
ProfileComponent.js
import React, { Component } from 'react';
import { Container, Row, Col, Card, CardHeader, CardBody, CardFooter, Input, Form, Button } from 'reactstrap';
import {connect} from 'react-redux';
import { uploadImage, fetchUser } from '../redux/ActionCreators';
import { baseUrl } from '../config';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
const mapStateToProps = (state) => {
return {
user: state.auth.user,
}
}
const mapDispatchToProps = (dispatch) => ({
uploadImage: (userId, imageData) => {dispatch(uploadImage(userId, imageData))},
fetchUser: (userId) => {dispatch(fetchUser(userId))}
})
class Profile extends Component {
constructor(props){
super(props);
this.state = {
selectedFile: null
}
this.handleUpload = this.handleUpload.bind(this);
this.onChangeHandler = this.onChangeHandler.bind(this);
}
handleUpload(event){
const data = new FormData()
data.append('image', this.state.selectedFile)
this.props.uploadImage(this.props.match.params.userId, data);
event.preventDefault();
}
onChangeHandler=event=>{
this.setState({selectedFile: event.target.files[0]});
}
componentDidMount() {
console.log('user',this.props.user);
}
render() {
//
return(
<Container className="form-container" >
<Row>
<Col md={{size:6}}>
<Col md={{size:6,offset:3}}>
<div style={{marginBottom:30}}>
<img className="profile-image" src= {`${baseUrl}${this.props.user.image}`}/>
<Form >
<Input type="file" name="image" id="file" onChange={this.onChangeHandler} />
<Button type="submit" color="primary" className="form-control" onClick = {this.handleUpload}>Upload</Button>
</Form>
</div>
</Col>
</Col>
<Col md={6}>
<div className="shadow-container" style={{marginTop:0}}>
<Card>
<CardHeader>
<h2>Profile details</h2>
</CardHeader>
<CardBody>
<h4 style={{color:'grey'}}>{this.props.match.params.userId}</h4>
<h5 style={{color:'grey'}}></h5>
<small><i></i></small>
</CardBody>
<CardFooter>
<Row>
<Col>
<a href="/editprofile"><span className="fa fa-pencil fa-2x ml-auto"
style={{color:'blue', display:'flex',
flexDirection:'row',justifyContent:'flex-end'}}></span></a>
</Col>
<Col>
<a href="/deleteprofile"><span className="fa fa-trash fa-2x" style={{color:'red'}}></span></a>
</Col>
</Row>
</CardFooter>
</Card>
</div>
</Col>
</Row>
</Container>
);
}
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Profile));
MainComponent.js
import React, {Component} from 'react';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import Users from './UsersComponent';
import Register from './RegisterComponent';
import Signin from './SigninComponent';
import Profile from './ProfileComponent';
import Edit from './EditComponent';
import { signin, signout, fetchUser } from '../redux/ActionCreators';
import {connect} from 'react-redux';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
const mapStateToProps = (state) => {
return {
auth: state.auth
}
}
const mapDispatchToProps = (dispatch) => ({
signin: (credentials) => {dispatch(signin(credentials))},
signout: () => {dispatch(signout())},
fetchUser: (userId) => {dispatch(fetchUser(userId))}
})
class Main extends Component {
componentDidMount() {
this.props.fetchUser(this.props.auth.userId);
console.log('main',this.props.auth);
}
render() {
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
this.props.auth.authenticated
? <Component {...props} />
: <Redirect to={{
pathname: '/signin',
state: { from: props.location }
}} authenticated={this.props.auth.authenticated} />
)} />
)
return (
<div>
<Menu authenticated={this.props.auth.authenticated} signout={this.props.signout} userId={this.props.auth.userId}/>
<TransitionGroup>
<CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
<Switch>
<Route path="/home" component={Home} />
<PrivateRoute path="/users" component={Users} />
<Route path="/signup" component={Register} />
<Route path="/signin" component={() => <Signin signin={this.props.signin} authenticated={this.props.auth.authenticated}/>} />} />
<PrivateRoute path="/profile/:userId" component={() => <Profile />} />
<Route path="/editprofile" component={Edit} />
<Redirect to="/home" />
</Switch>
</CSSTransition>
</TransitionGroup>
</div>
);
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));
答案 0 :(得分:0)
首先,检查该值是否可用
您可以执行以下操作来解决错误:
{this.props.user && <img className="profile-image" src= {`${baseUrl}${this.props.user.image}`}/> }
问题:
用户道具可能是通过某些API或在某些过程后初始化的,因此它不适用于第一个渲染,但是一旦道具更改(用户初始化),它就会强制重新渲染,因此您可以在其中获取数据第二次。