Reactjs:失败的道具类型:发布新数据时无法从道具中获取值

Question

我正在开发一款社交应用程序，用户应该在该应用程序中发布尖叫、点赞和评论。我面临的问题是，当我发布新的尖叫时，我没有得到道具值，但在重新加载页面后，一切都很好

这是home.js我将道具发送到Scream.js:-的地方

class home extends Component {
componentDidMount() {
this.props.getScreams();
}
render() {
const { screams, loading } = this.props.data;
let recentScreamsMarkup = !loading ? (
screams.map((scream) => <Scream key={scream.screamId} scream={scream} />)
) : (
<ScreamSkeleton />
);
return (
<Grid container spacing={10}>
<Grid item sm={8} xs={12}>
{recentScreamsMarkup}
</Grid>
<Grid item sm={4} xs={12}>
<Profile />
</Grid>
</Grid>
);
}
}
home.propTypes = {
getScreams: PropTypes.func.isRequired,
data: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
data: state.data,
});
export default connect(mapStateToProps, { getScreams })(home);

这是Scream.js，它正在接收道具并在屏幕上显示尖叫声：-

class Scream extends Component {
render() {
dayjs.extend(relativeTime);
const {
classes,
scream: {
body,
createdAt,
userImage,
userHandle,
screamId,
likeCount,
commentCount,
},
user: {
authenticated,
credentials: { handle },
},
} = this.props;
const deleteButton =
authenticated && userHandle === handle ? (
<DeleteScream screamId={screamId} />
) : null;
console.log("Image", { userImage });
console.log("Handle", { userHandle });
console.log("Body", { body });
return (
<Card className={classes.card}>
<CardMedia
image={userImage}
title="Profile image"
className={classes.image}
/>
<CardContent className={classes.content}>
<Typography
variant="h5"
component={Link}
to={`/users/${userHandle}`}
color="primary"
>
{userHandle}
</Typography>
{deleteButton}
<Typography variant="body2" color="textSecondary">
{dayjs(createdAt).fromNow()}
</Typography>
<Typography variant="body1">{body}</Typography>
</CardContent>
</Card>
);
}
}
Scream.propTypes = {
user: PropTypes.object.isRequired,
scream: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
openDialog: PropTypes.bool,
};
const mapStateToProps = (state) => ({
user: state.user,
});
export default connect(mapStateToProps)(withStyles(styles)(Scream));

这是PostScream.js用于发布尖叫：-

class PostScream extends Component {
state = {
open: false,
body: "",
errors: {},
};
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.UI.errors) {
this.setState({
errors: nextProps.UI.errors,
});
}
if (!nextProps.UI.errors && !nextProps.UI.loading) {
this.setState({
body: "",
open: false,
errors: {},
});
}
}
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.props.clearErrors();
this.setState({ open: false, errors: {} });
};
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
this.props.postScream({ body: this.state.body });
};
render() {
const { errors } = this.state;
const {
classes,
UI: { loading },
} = this.props;
return (
<Fragment>
<MyButton onClick={this.handleOpen} tip="Post a Scream!">
<AddIcon />
</MyButton>
<Dialog
open={this.state.open}
onClose={this.handleClose}
fullWidth
maxWidth="sm"
>
<MyButton
tip="Close"
onClick={this.handleClose}
tipClassName={classes.closeButton}
>
<CloseIcon />
</MyButton>
<DialogTitle> Post a new Scream </DialogTitle>
<DialogContent>
<form onSubmit={this.handleSubmit}>
<TextField
name="body"
type="text"
label="SCREAM!"
multiline
rows="3"
placeholder="What's on your mind!"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.TextField}
onChange={this.handleChange}
fullWidth
/>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.submitButton}
disabled={loading}
>
Submit
{loading && (
<CircularProgress
size={30}
className={classes.progressSpinner}
/>
)}
</Button>
</form>
</DialogContent>
</Dialog>
</Fragment>
);
}
}
PostScream.propTypes = {
postScream: PropTypes.func.isRequired,
clearErrors: PropTypes.func.isRequired,
UI: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
UI: state.UI,
});
export default connect(mapStateToProps, { postScream, clearErrors })(
withStyles(styles)(PostScream)
);

正如你在Scream.js中看到的，我正在控制台中打印道具的值，我得到的是未定义的，但在重新加载后，我得到了这些值。

发布新尖叫时的图像：-发布一个新尖叫时

重新加载后的图像：-重新装载后

Answer 1

我不使用基于类的组件，大麦有。当你发布你的尖叫时，你能告诉我你是如何更新的吗同时删除/裁剪您的图片不要显示您的私人数据。我强烈建议您试用功能组件。