如果EditMessage
为真(请参阅Dashboard.js
中的showEdit
)和initState
,我希望浏览器显示MessageReducer.js
(在CreateMessage
中)的组成部分showEdit
为假,但我的代码不起作用。我的应用未注意到Dashboard.js
中的状态或道具更改。
我尝试在this.setState
中包含Dashboard.js
方法,但出现错误:“超出了最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。”
我还尝试将showTypeForm
的值直接分配给props并将其输出(请参阅Dashboard.js
中的注释),但是这种方法也不起作用。我不确定要使用哪种生命周期方法。
我的代码如下所示。 MessageSummary.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class MessageSummary extends Component {
editClick = (e) => {
e.preventDefault();
this.props.editMessage('123', 'I love web development'); //test values
}
render() {
return (
<button className="edit-message" onClick={this.editClick}>Edit
Message</button> // this button changes showEdit in MessageReducer.js
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
editMessage: (id, newMessage) => dispatch(editMessage(id, newMessage))
}
}
export default connect(null, mapDispatchToProps)(MessageSummary);
MessageActions.js:
export const editMessage = (id, newMessage) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
dispatch({
type: "EDIT_MESSAGE"
});
}
}
RootReducer.js:
// importing everything
const rootReducer = combineReducers({
message: messageReducer
});
export default rootReducer;
MessageReducer.js:
const initState = {
showEdit: false
};
const messageReducer = (state = initState, action) => {
switch (action.type) {
case 'EDIT_MESSAGE':
initState.showEdit = !initState.showEdit; // toggling showEdit
return state;
default:
return state;
}
}
export default messageReducer;
Dashboard.js:
// importing everything
class Dashboard extends Component {
state = {
showEdit: this.props.message.showEdit
}
render() {
const { message } = this.props; // destructuring
// this.setState({
// showEdit: message.showEdit
// })
// const showTypeForm = message.showEdit ? <EditMessage /> : <CreateMessage />;
return (
<div className="message-form">
{this.state.showEdit ? <EditMessage /> : <CreateMessage />}
// {showTypeForm }
</div>
)
}
const mapStateToProps = (state) => {
return {
message: state.message
}
}
}
export default connect(mapStateToProps)(Dashboard);
答案 0 :(得分:0)
您不会在道具更改时更新状态,您需要在componentDidUpdate中执行一个条件,以使其不会陷入无限循环(“超过最大更新深度”。我希望这会有所帮助。
在render中写入this.setState将使您陷入无限循环的原因,因为无论何时状态更改组件再次渲染。
class Dashboard extends Component {
state = {
showEdit: this.props.message.showEdit
}
componentDidUpdate(prevProps){
if(this.props.message !== prevProps.message){
this.setState({
showEdit: this.props.message.showEdit
})
}
}
render() {
const { message } = this.props; // destructuring
// this.setState({
// showEdit: message.showEdit
// })
// const showTypeForm = message.showEdit ? <EditMessage /> : <CreateMessage />;
return (
<div className="message-form">
{this.state.showEdit ? <EditMessage /> : <CreateMessage />}
// {showTypeForm }
</div>
)
}
const mapStateToProps = (state) => {
return {
message: state.message
}
}
}
export default connect(mapStateToProps)(Dashboard);
答案 1 :(得分:0)
化简版'MessageReducer.js'中出了点问题。在这里,您可以直接更改与reducer函数规格相反的'initState'值。每次返回一个新的状态对象时,它应该是一个纯函数并且不应该改变状态。
请尝试在MessageReducer.js中使用以下更新的代码
const initState = {
showEdit: false
};
const messageReducer = (state = initState, action) => {
switch (action.type) {
case 'EDIT_MESSAGE':
let updatedState = Object.assign({},state,{showEdit:!state.showEdit}) ;
return updatedState;
default:
return state;`enter code here`
}
}
export default messageReducer;