Условный рендеринг response-redux - PullRequest
Новая
       16

Условный рендеринг response-redux

0 голосов
/ 06 мая 2019

У меня есть проблема, которую я не могу понять.У меня есть какой-то компонент внутри, я использую плагин таблицы реакции.

на componentDidMount методе, я должен вызвать избыточное действие, которое получает данные из API, а затем я передаю эти данные в таблицу реакции.

вот мой componentDidMount метод, в котором я вызываю redux action.

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.

но я не знаю, как реагирует таблица-таблица при рендеринге, когда данные тоже нулевые.

где я возвращаю таблицу реакции, я пытаюсь сделать console.log моими данными, но они возвращаютсяundefined

иногда рендеринг компонентов без проблем, иногда просто выдает ошибку, что данные не определены.

Я делаю ошибку по поводу условного рендеринга?

Я пытался сделать это: компонент будет ждать данных, и только когда данные придут, этот компонент будет рендериться.

где я ошибаюсь?

Ответы [ 3 ]

1 голос
/ 06 мая 2019
  1. Ваше начальное состояние - массив, но я думаю, что вы хотели объект. 
let initialState = [{
    items: null
}]

что вы хотите 

let initialState = {
    items: null
}

Чтобы выразить это словами, в первом случае getDataReducer возвращает массив с {items: null} в первой позиции,
так что для получения items нужно getDataReducer[0].items.
Но если вы измените его на объект, вы можете просто, getDataReducer.items.

  1. И что более важно, ваша логика проверки инвертирована. 
 if (this.props.getDataReducer.items != null) {
   // ...loading component
 }

должно быть 

 if (this.props.getDataReducer.items === null) {
    // ...loading component
 }
  1. Рассмотрите возможность рефакторинга и добавления переменной isLoading в вашем штате,
    который вы должны установить на true в FETCH_DATA_START и false в SUCCESS и FAILURE случаях.
    Проверка, являются ли items значения null, не обязательно означает, что они загружаются, так как ваше приложение и код растут, лучше быть более точным в том, что вы имеете в виду.
0 голосов
/ 06 мая 2019

Я думаю, проблема в том, что вы устанавливаете свое состояние, чтобы специально проверять нулевое значение. Вы должны проверить, является ли предмет просто значением truey . Поскольку свойство данных 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) Не уверен, что это опечатка, но начальное состояние вашего редуктора выглядит испорченным. 

let initialState = [{
    items: null
}]

Ваш редуктор возвращает новый объект состояния. если бы вы распространили в него начальное состояние, вы бы получили некоторые непреднамеренные дополнительные свойства, которые вам не пригодились бы. Я считаю, что вы ищете: 

let initialState = {
    items: null
}
0 голосов
/ 06 мая 2019

Вы можете упростить обработку условия для неопределенных и нулевых значений: 

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

Еще одна хорошая практика для ясности кода, лучше, чтобы пользовательские функции обрабатывали эти условия, чтобы render () имеет только один возврат .

...