条件渲染 react-redux

Question

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

在 componentDidMount 方法上，我必须调用从 api 获取数据的 redux 操作，然后我将此数据传递给 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} 
                                 />
       )
}

这是我对我的数据进行条件渲染。如果项目为空 return 一些加载文本 else return react-table 与来自 api 的数据。

但我不知道如何反应-table 尝试在数据为空时呈现。

我 return 反应 - table 我正在尝试制作 console.log 我的数据，但它 return 未定义

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

我搞错了条件渲染？

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

我哪里弄错了？

Answer 1

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

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

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

Answer 2

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

let initialState = [{
    items: null
}]

你想要的是

let initialState = {
    items: null
}

换句话说，第一种情况getDataReducer returns第一个位置是{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 并不一定意味着它们正在加载，随着您的应用程序和代码的增长，最好更具体地说明您的意思。

Answer 3

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

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
}]

您的减速器正在返回一个新的状态对象。如果您要将初始状态散布到其中，您会得到一些对您无用的意外附加属性。我相信您正在寻找：

let initialState = {
    items: null
}

条件渲染 react-redux

Conditional rendering react-redux

javascript

reactjs

redux

react-table