应该如何映射这些来自 Axios Http 请求的数据 (w/ React/Redux)

Question

我使用 redux-thunk 和 Axios 进行了异步调用。一切正常，但我很难构建我的组件。我不知道如何映射我的 props/data。以下是数据在我的商店中的存储方式：

我想访问第二个数据数组。我正在尝试这个：

            const mapStateToProps = (state) => {
            return {
                isFetching: state.ThunkData.isFetching,
                data: state.ThunkData.data.data,
                error: state.ThunkData.error,
            };
        };

出现以下错误：Cannot read property 'data' of null。我需要将 data: state.ThunkData.data.data 替换为 data: state.ThunkData.data 才能使我的应用正常运行。

还在我的组件中添加 {console.log(this.props.data.data)} return 我这个 :

我怎样才能将我想要的数据传递到我的道具中，这样我就可以做这样的事情：

                        <ul>
          { props.map((m, i) =>
            <li key={i}>{m.authorname}</li>
          )}
        </ul>

如果需要，这里是我的详细代码：

我的动作创作者：

export const fetchTest = () => (dispatch) => {
    dispatch({
        type: 'FETCH_DATA_REQUEST',
        isFetching:true,
        error:null
  });
  return axios.get('http://localhost:3000/authors')
    .then(data => {
      dispatch({
            type: 'FETCH_DATA_SUCCESS',
            isFetching:false,
            data: data
      });
    })
    .catch(err => {
      dispatch({
            ype: 'FETCH_DATA_FAILURE',
            isFetching:false,
            error:err
      });
      console.error("Failure: ", err);
    });
};

我的组件：

class asyncL extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      componentWillMount() {
                      this.props.fetchTest(this.props.thunkData)
                      }
                      render() {
                      if (this.props.isFetching) {
                            return <p>{console.log(this.props.isFetching)}</p>
                      }else if (this.props.error) {
                      return <div>ERROR {this.props.error}</div>
                      }else {
                      return <p>{console.log(this.props.data.data)}</p> 
                      }
                    }
                  }

我的减速器：

const initialState = {data:null,isFetching: false,error:null};
export const ThunkData = (state = initialState, action)=>{
    switch (action.type) {
        case 'FETCH_DATA_REQUEST':
        case 'FETCH_DATA_FAILURE':
        return { ...state, isFetching: action.isFetching, error: action.error };

        case 'FETCH_DATA_SUCCESS':
        return Object.assign({}, state, {data: action.data, isFetching: action.isFetching,
                 error: null });
        default:return state;

    }
};

Answer 1

好的。我有解决方案：

我将我的 action creator 更新为这个（添加响应项）：

export const fetchTest = () => (dispatch) => {
    dispatch({
        type: 'FETCH_DATA_REQUEST',
        isFetching:true,
        error:null
  });
  return axios.get('http://localhost:3000/authors')
    .then(response => {
      dispatch({
            type: 'FETCH_DATA_SUCCESS',
            isFetching:false,
            data: response.data
      });
    })
    .catch(err => {
      dispatch({
            ype: 'FETCH_DATA_FAILURE',
            isFetching:false,
            error:err
      });
      console.error("Failure: ", err);
    });
};

这正在解决我的多对象级别请求。现在更新我的组件很容易：

class authorL extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var props = this.props.author;
    return (
      <div>
        <ul>
        { props.map((m, i) =>
          <li key={i} onClick={() => this.props.getFilteredName(m.name)}>
            {m.name}
          </li>
        )}
        </ul>
      </div>
    );
  };
}

应该如何映射这些来自 Axios Http 请求的数据 (w/ React/Redux)

How should map these data coming from Axios Http request (w/ React/Redux)

javascript

arrays

reactjs

react-redux