条件渲染 react-redux答案

【问题标题】：Conditional rendering react-redux条件渲染 react-redux
【发布时间】：2019-05-06 07:54:20
【问题描述】：

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

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

这是我调用 redux 操作的 componentDidMount 方法。

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。

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

我在哪里返回 react-table 我正在尝试让 console.log 我的数据，但它返回 undefined

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

我对条件渲染有误？

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

我在哪里犯错了？

【问题讨论】：

试试if (this.props.getDataReducer.items) { //react table } else { // loading }

标签： javascript reactjs redux react-table

【解决方案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 变量，
您应该在FETCH_DATA_START 中设置为true，在SUCCESS 和FAILURE 情况下设置为false。
检查items 是否为null 并不一定意味着它们正在加载，随着您的应用程序和代码的增长，最好更具体地说明您的意思。

【讨论】：

【解决方案2】：

我认为您遇到的问题是将您的条件设置为专门检查空值。您应该检查 items 是否只是 truthy 值。由于 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) 不确定这是否是拼写错误，但 reducer 中的初始状态看起来很乱。

let initialState = [{
    items: null
}]

你的 reducer 正在返回一个新的状态对象。如果您要将初始状态传播到其中，您将获得一些对您无用的意外附加属性。我相信您正在寻找：

let initialState = {
    items: null
}

【讨论】：

【解决方案3】：

对于 undefined 和 null，您可以使条件更易于处理：

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

另一个代码清晰的好习惯，最好让自定义函数处理这些情况，这样render()只有一个return。

【讨论】：