reactjs - 无法从 React 中的子组件更改父级的状态
问题描述
我正在构建一个简单的聊天应用程序,但未显示从子组件中的输入字段发布的新评论。--父组件--
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
comments: [],
currentUser: { displayName: "user3", uid: 3 }
};
}
addComment = comment => {
this.setState(prevState => {
comments: prevState.comments.push(comment);
});
console.log("this.state");
console.log(this.state);
};
render() {
const { comments, currentUser } = this.state;
return (
<div className="App">
{comments.map(comment => (
<div className="line__left" key={comment.createdAt}>
<figure>
<i className="fas fa-user fa-4x" />
</figure>
<div className="line__left-text">
<div className="name">{comment.createdBy.displayName}</div>
<div className="text">{comment.text}</div>
</div>
</div>
))}
<ChatInputBox addComment={this.addComment} currentUser={currentUser} />
</div>
);
}
}
--子组件--
class ChatInputBox extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "",
currentUser: this.props.currentUser
};
}
handleChange = e => {
this.setState({ text: e.target.value });
};
handleClickPost = e => {
e.preventDefault();
let comment = {
createdAt: new Date().getTime(),
createdBy: this.state.currentUser,
text: this.state.text
};
this.props.addComment(comment);
this.setState({ text: "" });
};
render() {
const { text } = this.state;
return (
<div className="ChatInputBox">
ChatBox
<textarea onChange={this.handleChange} value={text} />
<button onClick={this.handleClickPost}>Post</button>
</div>
);
}
}
填充文本区域并单击按钮后,父母的状态似乎已更新,但未显示新评论。如何显示?
解决方案
更改您的代码
addComment = comment => {
this.setState(prevState => {
comments: prevState.comments.push(comment);
});
console.log("this.state");
console.log(this.state);
};
至
addComment = comment => {
const { comments } = this.state;
this.setState({
comments: comments.concat(comment)
});
};
当你使用时setState()
,使用concat
而不是push
因为它保持你的数组的不变性。
推荐阅读
- c# - 此平台不支持 LocalDB 错误
- mysql - 无法在 MYSQL 中回滚 BMT EJB UserTransaction
- javascript - 如何在玩笑测试中模拟阴影元素
- bash - 如何在git上列出所有没有分支的远程名称?
- c# - Unity SetPositionAndRotation 不起作用
- python - 在嵌套列表中查找元素但我们不知道该列表
- java - Java Web 应用程序异常 mysql jdbc 驱动程序类未找到
- sql - 为数组输入构造 SQL Server 存储过程
- android - 在少数活动中显示操作栏
- python - 如何使用 tkinter 中的 2D 列表访问按钮网格中的按钮?