【发布时间】：2018-04-16 17:09:21
【问题描述】：
我在一个自学项目（reddit 克隆）中使用了几种不同的技术：
- 反应
- react-redux
- redux
- 反应路由器 (v4)
目标：点击帖子的编辑链接时，转到正确的路线并填充编辑表单字段。
我正在使用一个容器，它调度一个动作并重新渲染更新容器道具内的组件。它看起来像这样：
容器：
class PostContainer extends Component {
componentDidMount() {
debugger;
const {id} = this.props.match.params;
this.props.dispatch(fetchPost(id));
}
render() {
return (
<Post post={this.props.post} editing={this.props.location.state? this.props.location.state.editing : false}/>
);
}
}
const mapStateToProps = (state, ownProps) => {
debugger;
return {
...ownProps,
post: state.post
};
};
export default connect(mapStateToProps)(withRouter(PostContainer));
嵌套的 Post 组件有额外的嵌套组件：
POST 组件：
class Post extends Component {
constructor(props) {
super(props);
this.editToggle = this.editToggle.bind(this);
}
state = {
editing: this.props.location.state ? this.props.location.state.editing : false
};
editToggle() {
this.setState({editing: !this.state.editing});
}
render() {
const {editing} = this.state;
if (editing || this.props.post === undefined) {
return <PostEditForm editToggle={this.editToggle} editing={this.props.editing} post={this.props.post || {}}/>;
}
return (
<div>
<div>
<h2>Title: {this.props.post.title}</h2>
<span>Author: {this.props.post.author}</span>
<br/>
<span>Posted: {distanceInWordsToNow(this.props.post.timestamp)} ago f</span>
<p>Body: {this.props.post.body}</p>
<button type='button' className='btn btn-primary' onClick={() => this.editToggle()}>Make Edit</button>
</div>
<hr/>
<Comments post={this.props.post}></Comments>
</div>
);
}
}
export default withRouter(Post);
在第一个if 语句中的render 函数中，我将更新后的道具传递给<PostEditForm>。 PostEditForm 收到 props 后，会重新渲染组件，但组件的状态并没有更新。
PostEditForm：
class PostEditForm extends Component {
state = {
timestamp: this.props.post.timestamp || Date.now(),
editing: this.props.editing || false,
body: this.props.post.body || '',
title: this.props.post.title || '',
category: this.props.post.category || '',
author: this.props.post.author || '',
id: this.props.post.id || uuid()
};
clearFormInfo = () => {
this.setState({
timestamp: Date.now(),
body: '',
title: '',
category: '',
author: '',
id: uuid(),
editing: false
});
};
handleOnChange = (e) => {
this.setState({[e.target.id]: e.target.value});
};
handleSubmit = event => {
event.preventDefault();
const post = {
...this.state
};
if(this.state.editing) {
this.props.dispatch(updatePostAPI(post));
this.setState({
editing: false
})
} else {
this.props.dispatch(createPostAPI(post));
this.clearFormInfo();
window.location.href = `/${post.category}/${post.id}`;
}
};
render() {
const {editing} = this.state;
return (
<form onSubmit={this.handleSubmit}>
<div>
<h2>Create New Post</h2>
<label htmlFor='text'>
Title:
<input
type="text"
onChange={this.handleOnChange}
value={this.state.title}
placeholder="Enter Title"
required
id="title"
name="title"
/>
</label>
<label>
Author:
<input
type="text"
onChange={this.handleOnChange}
value={this.state.author}
placeholder="Enter Author"
required
id="author"
name="author"
/>
</label>
<label>
</label>
<label>
Body:
<textarea
type="text"
onChange={this.handleOnChange}
value={this.state.body}
placeholder="Enter Body"
required
id="body"
name="body"
/>
</label>
</div>
<label>
Category:
<select id = 'category' onChange={this.handleOnChange} value={this.state.value} required>
<option value='Select Category'>Select Category</option>
<option value='react'>react</option>
<option value='redux'>redux</option>
<option value='udacity'>udacity</option>
</select>
</label>
<button type='submit'>Create Post</button>
</form>
);
}
}
export default connect()(PostEditForm);
我相信我需要调用setState 并分配新的道具传递到状态，但我不知道使用哪个生命周期方法。
当我使用componentDidUpdate 时，类似：
class PostEditForm extends Component {
componentDidUpdate(prevProps) {
if(this.props.post.id !== prevProps.post.id) {
this.setState({
timestamp: this.props.post.timestamp,
editing: this.props.post.editing,
title: this.props.post.title,
category: this.props.post.category,
author: this.props.post.author,
id: this.props.post.id
})
}
}
.....
componentDidUpdate 解决了最初的问题，但是每当我更新我正在编辑的表单中的内容时，都会调用生命周期方法，从而消除了对 onChange 处理程序的需求，这是一个好习惯还是应该使用不同的方法？
【问题讨论】：
标签： javascript reactjs redux