Установите состояние реагирующего компонента, используя избыточный магазин - PullRequest
Новая
       7

Установите состояние реагирующего компонента, используя избыточный магазин

1 голос
/ 19 марта 2019

Как я могу присвоить некоторые значения избыточного хранилища моему локальному состоянию компонента?

Я должен использовать избыточные действия для получения данных из API в моем методе componentDidMount (). Я прав? после получения данных по redux я хочу установить состояние моего компонента, используя данные из хранилища redux. Я получил ошибку this.props.article не определено. , но redux devtools показывает, что объект article существует.

Где я должен был вызвать this.setState () метод ??? Я пытался вызвать его в componentWillRecieveProps () или componentDidUpdate (), но безуспешно. Пожалуйста, помогите. Спасибо заранее. 

import React, { Component, Fragment } from 'react';
import { Typography,Spin } from 'antd';
import {connect} from 'react-redux';
import {getArticleDetails} from '../store/actions/articles';



class ArticleEdit extends Component {
    articleID = this.props.match.params.articleID; 
    state={

        str:'initial'
    }
    onChange = (str) => {
        console.log('Content change:', str);
        this.setState({ str1:str });

      };
    componentDidMount(){
        this.props.getArticleDetails(this.articleID);// GET data from api
        this.setState({str:this.props.article.title});// returns undefined

    }

    render() {
        return (
            <Fragment>
                {this.props.article===undefined?(<Spin/>):
                    (
                    <div>
                        <div style={{marginRight:'500px'}}>
                          <Paragraph editable={{ onChange: this.onChange}}>                          
                               {this.state.str}
                          </Paragraph>
                        </div>
                    </div>
                    )}    
            </Fragment>
        )
    }
}

const mapStateToProps = state =>({
    article: state.articleReducer.articles[0],    
})

export default connect(mapStateToProps,{getArticleDetails})(ArticleEdit);

1 Ответ

4 голосов
/ 19 марта 2019

Как сказал Хенрик, вы хотите использовать this.props вместо this.state. Вы уже получаете статью, используя mapStateToProps, и это хорошо. Если вы хотите передать заголовок статьи вашему компоненту, вы можете добавить некоторый код в метод render (), например: 

render() {
    const { article } = this.props
    const { title } = article
    return (
            ...
                      <Paragraph editable={{ onChange: this.onChange}}>                          
                           {title}
                      </Paragraph>
            ...
...