javascript - 条件渲染react-redux

Question

我有一些我无法解决的问题。我里面有一些组件，我正在使用react-table插件。

在 componentDidMount 方法上，我必须调用 redux 操作，该操作从 api 获取数据，然后我将此数据传递给react-table。

这是我的 componentDidMount 方法，我在其中调用 redux 操作。

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

这是我的行动:

export const FETCH_DATA_START = 'FETCH_DATA_START'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'

export const getOffBoardingData = () => {
    return (dispatch) => {
        dispatch({
            type: FETCH_DATA_START
        })
        fetch(baseUrl, {
                credentials: "include",
                method: "GET",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then((res) => {
                dispatch({
                    type: FETCH_DATA_SUCCESS,
                    payload: res.result
                })
            })
            .catch((err) => {
                dispatch({
                    type: FETCH_DATA_FAILED,
                    payload: 'error'
                })
            })
    }
}

这是我的 reducer 。

import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_FAILED } from 'store/actions/getData'

let initialState = [{
    items: null
}]

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return {...state}
        case FETCH_DATA_SUCCESS:
            return { ...state, items: action.payload} 
        case FETCH_DATA_FAILED: 
             return {...state}
        default:
            return state
    }
}

我认为这里一切都运转良好。

在我的组件中，我正在尝试进行条件渲染，例如:

 if (this.props.getDataReducer.items != null) {
        return (<div>
            <p>Loading...</p>
        </div>);
      } else { 
     return(
          <ReactTable className="-striped -highlight"
              data={this.props.getDataReducer.items}
              columns={columns} 
                                 />
       )
}

这是我为我的数据进行条件渲染。如果 items 为 null，则返回一些加载文本，否则返回包含来自 api 的数据的 React-table。

但我不知道当数据为空时 react 表如何尝试渲染。

在我返回react-table的地方，我试图使console.log我的数据，但它返回未定义

有时组件渲染没有问题，有时只是给出数据未定义的错误。

我对条件渲染犯了错误？

我试图做到这一点:组件将等待数据，并且只有当数据到来时组件才会渲染。

我哪里出错了？

Answer 1

1. 您的初始状态是一个数组，但我猜您想要一个对象。

let initialState = [{
    items: null
}]

你想要的是

let initialState = {
    items: null
}

用文字来说，第一种情况getDataReducer返回一个数组 {items: null}在第一个位置，
所以得到items你需要getDataReducer[0].items .
但如果你将它更改为一个对象，你可以简单地，getDataReducer.items .

更重要的是，您的检查逻辑是颠倒的。

 if (this.props.getDataReducer.items != null) {
   // ...loading component
 }

应该是

 if (this.props.getDataReducer.items === null) {
    // ...loading component
 }

考虑重构，并添加 isLoading您所在州的变量，
您应该将其设置为 true在 FETCH_DATA_START并发送至false在 SUCCESS和FAILURE案例。
检查是否items是null不一定意味着它们正在加载，随着您的应用程序和代码的增长，最好更具体地说明您的意思。