Question

我有一个App组件，其中包含所有路线

App.jsx

import Editor from './Editor';

function App(props) {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/cms/post/edit/:postId" component={Editor} />
            </Switch>
        </BrowserRouter>
    );
}
export default App;

我有一个Editor组件，用户可以在其中编辑帖子。该组件将数据从redux存储映射到本地状态，因为需要在本地操作数据。

Editor.jsx

// Usual Imports

class Editor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: props.post ? props.post.title : '',
            content: props.post ? props.post.content : ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.props.post ? null : this.fetchPosts(this.props.match.params.postId);
    }

    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    updatePost(data) {
        // function to updatePost 
    }

    fetchPosts(id) {
        // function to fetch Posts
    }

    render() {
        return (
            <React.Fragment>
                <input type="text" name="title" value={this.state.title} onChange={this.handleChange} />
                <input type="text" name="content" value={this.state.content} onChange={this.handleChange} />
            </React.Fragment>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    post: state.posts[ownProps.match.params.postId] || false,
    ...ownProps
}),
mapDispatchToProps = dispatch => ({
    updatePost: data => dispatch(updatePost(data)),
    fetchPosts: params => dispatch(fetchPosts(params))
});

export default connect(mapStateToProps, mapDispatchToProps)(Editor);

现在我的问题是

最初，发布数据可用并且不调用fetchPosts。但是，如果用户刷新页面，则post变为false并调用fetchPosts并更新redux store。

我应该在哪个lifecycle method中使用来自props的数据更新本地反应状态？

我认为可能的解决方案

A。在componentWillReceiveProps

中更新状态

    componentWillReceiveProps(nextProps) {
        this.setState({
            title: nextProps.post.title,
            content: nextProps.post.content
        });
    }

但是，React文档不鼓励使用componentWillReceiveProps，因为它可能会在React 16中多次调用，依此类推。

B。在componentDidUpdate

中更新状态

componentDidUpdate(prevProps, prevState) {
    if (this.props.post != prevProps.post) {
        this.setState({
            title: this.props.title,
            content: this.props.content
        });
    }
}

对此我不确定，因为我认为这种方法可能会隐藏一些副作用。

C。不设置初始状态，不通过value向input提供props到value={this.props.post.title}标签，并通过state更新onChange handlers。但是，当value为undefined时，React将抛出error 。

D。 较新的lifecycle methods，例如getDerivedStateFromProps。不太确定，正如React docs所说的那样，在状态根据道具随时间变化的极少数情况下应该使用它。。

我需要保持状态，因为当前组件也用于创建新帖子。

哪种方法最好？如果我错过了某些事情，请告诉我！谢谢！

将本地反应状态与来自redux的数据同步

0 个答案: