РЕАГИРОВАТЬ выборку перед рендерингом - PullRequest
Новая
       25

РЕАГИРОВАТЬ выборку перед рендерингом

0 голосов
/ 23 мая 2018

Я пытаюсь отобразить извлеченные данные, но всегда получаю ошибку в своем отображении, потому что данные не были извлечены, прежде чем я использую функцию сопоставления.Я могу получить определенный элемент из полученных данных, используя событие click.

enter image description here

родительский класс, в который я получаю свои данные,Мне нужны данные пива для моего картографирования. 

class App extends Component{


    constructor(props){
        super(props);
        this.props.fetchUser();
        this.props.fetchBeers();
    }

класс, в котором я пытаюсь составить карту своего пива: 

class BeersLanding extends Component{



 getBeers = () => {
     let beers= this.props.beers;
     console.log(beers);
     console.log(beers[0]);
     console.log(beers[1]);

 }

 constructor(props){
     super(props);

 }

render(){

    const {loading} =this.props;


   console.log(this.props.beers)

    return(


        <div style={{textAlign:'center'}}>

           ...

                <input type="text" placeholder="Search.." name="search"></input>
                <button type="submit" onClick={() =>this.getBeers()} >Submit</button>

            <div className={'beersContainer'}>

                 {this.props.beers.map((beer,index) =>(
                    <div className={'card'}>
                    hello
                    </div>
                ))}  

            </div>
        </div>
    );
}

}

Метод действия: 

export const fetchBeers = () => async dispatch => {

    const res = await axios.get('/api/beers');
    dispatch({type:FETCH_BEERS, payload:res.data});
};

редуктор: 

export default function(state=null, action){

    // console.log(action);
    switch(action.type){
    case FETCH_BEERS:
        return action.payload; 

    default:
        return state;
    }
}

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Я бы рекомендовал использовать ловушки реагирования жизненного цикла для этого типа проблем. 

componentDidMount() {
    this.props.YOURACTIONS()
}

Так что это произойдет, когда компонент загружен.

0 голосов
/ 23 мая 2018

Существуют опции буксировки для решения этой проблемы, первый вариант, и я рекомендовал использовать его, используя defaultProps и установить значение пчел по умолчанию в качестве массива.второй вариант путем добавления условия перед отображением ваших данных 

{this.props.beers && this.props.beers.map((beer,index) =>(
                    <div className={'card'}>
                    hello
                    </div>
                ))}
...