Реагировать-Redux.Как я могу получить значения результата редукса для передачи через setState

Question

React-Redux. Как получить значения результата редукции, которые будут переданы через setState.Я знаю, что этот вопрос, возможно, задавался раньше, но большинство решений, которые я нашел здесь, не смогли решить мою проблему.

Приведенный ниже код отображает записи из файла JSON

[{"id":"1","firstName":"jmarkatti","lastName":"john"}]

Приведенный ниже код показывает, какспособен отображать результат без функции map () в методе render (), и он отлично работает.

Last Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />
First Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />

Приведенный ниже код показывает, как можно отобразить результат с map () функция в методе render (), которая также работает нормально.

    {pgs1.items1 && pgs1.items1.map((pg1, i) =>


                            <li key={pg1.id}>
{pg1.firstName} -- {pg1.lastName}

</li>
 )}

Теперь у меня есть требования к передаче значений результатов редукса в методе setState () а затем предупредить значения.Для этого я попробовал следующие коды ниже

 componentWillMount() {
this.props.dispatch(userActions.getAll_Rec());

 this.setState({
      lastName:  this.props.pgs1.items1 && this.props.pgs1.items1[0].lastName,
      firstName: this.props.pgs1.items1 && this.props.pgs1.items1[0].firstName,
    });
alert(lastName);
alert(firstName);

    }

or


componentWillReceiveProps(props) {
  this.setState({
      lastName: props.items1[0].lastName,
      firstName: props.items1[0].firstName,
    });
alert(lastName);
alert(firstName);
                }

Но он показывает ошибку

ReferenceError: lastName не определено в Paging1.componentWillMount , кажется, файл JSON дляlastName и firstName не доступны должным образом.

Вот код редукции

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import {UActions } from '../actions';

class Paging1 extends React.Component {



constructor(props) {
        super(props);
this.state = {
id: '',
lastName: '',
firstName: '',   
        };

    }




   // componentDidMount() {

    componentWillMount() {
this.props.dispatch(userActions.getAll_Rec());

    }


/*
i have tried 


 componentWillMount() {
this.props.dispatch(userActions.getAll_Rec());

 this.setState({
      lastName:  this.props.pgs1.items1 && this.props.pgs1.items1[0].lastName,
      firstName: this.props.pgs1.items1 && this.props.pgs1.items1[0].firstName,
    });
alert(lastName);
alert(firstName);

    }

or 


componentWillReceiveProps(props) {
  this.setState({
      lastName: props.items1[0].lastName,
      firstName: props.items1[0].firstName,
    });
alert(lastName);
alert(firstName);
                }

*/



    render() {



        const { pg1, pgs1 } = this.props;


        return (


 <div className="list">
                <div className="res">

Last Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />
First Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />



            </div>



</div>

        );
    }
}


function mapStateToProps(state) {
    const { pgs1} = state;
    const { pg1 } = state;
    return {
        pg1,
        pgs1
    };
}


const connectedPaging1 = connect(mapStateToProps)(Paging1);
export { connectedPaging1 as Paging1 };

Вот файл редуктора

import { userConstants } from '../_constants';

export function pgs1(state = {}, action) {
  switch (action.type) {


case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
items1: action.pgs1
  };

Answer 1

Передача результирующих записей redux через componentWillReceiveProps () решает проблему.

Спасибо всем

componentWillReceiveProps(props) {


  this.setState({
      lastName: props.pgs1.items1 && props.pgs1.items1[0].lastName,
      firstName: props.pgs1.items1 && props.pgs1.items1[0].firstName,
    });
}