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'
                })
            })
    }
}

这是我的减速器。

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。

但是我也不知道当数据为null时，react-table如何尝试呈现。

我在其中返回react-table的地方，我试图创建console.log我的数据，但是返回未定义的

有时组件渲染没有问题，有时会给出错误消息，即数据未定义。

我对条件渲染有误？

我试图做到这一点：组件将等待数据，只有当数据到达时，组件才会呈现。

我在哪里犯错？

Answer 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并不一定意味着它们正在加载，因为随着您的应用程序和代码的增长，最好更加具体地说明您的意思。

Answer 2

您可以使未定义和null的条件更易于处理：

 if (this.props.getDataReducer.items) {
        return (<div>
            <p>Loading...</p>
        </div>);
      } else { ... 
 }

另一种提高代码清晰度的好方法，最好让自定义函数处理这些情况，以便 render（）仅具有一个 return 。

Answer 3

我认为您遇到的问题是将条件设置为专门检查是否为空值。您应该检查项目是否仅仅是真实值。由于React-Table的data属性接受一个数组，因此您还应该检查项目是否也具有长度。

1）更新组件中的条件

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

2）不知道这是否是错字，但减速器中的初始状态看起来很混乱。

let initialState = [{
    items: null
}]

您的reducer返回一个新的状态对象。如果要将初始状态扩展到初始状态，则会得到一些意外的附加属性，这些属性对您没有用。我相信您正在寻找：

let initialState = {
    items: null
}

条件渲染react-redux

3 个答案: