Как настроить избыточное обещание, чтобы запрос Axios успел завершиться? - PullRequest
Новая
       10

Как настроить избыточное обещание, чтобы запрос Axios успел завершиться?

0 голосов
/ 10 июня 2018

Новый для реагирования и редукции, так что терпите меня.

У меня есть контейнер реакции, который вызывает действие при загрузке.Действие возвращает запрос axios, и в идеале редуктор должен возвращать результаты и обновлять состояние.Однако не похоже, что результаты запроса axios заканчиваются.

Я получаю сообщение об ошибке, что this.props.sparts.map не является функцией и sparts пусто, когда я печатаю this.props, поэтомуЯ предполагаю, что запрос не заканчивается.

Компонент 

class Spart extends Component {
  renderSpart() {
    let sparts = []

    console.log('please print something')
    console.log(this.props)

    this.props.sparts.map((spart, index) => {
      sparts.push(
          <div class="ui column wide spart-container">
            <div class="fake-img"></div>
            <div class="audio-container">
              {spart.song}
            </div>
            <div class="writing-container">
              {spart.writing}
            </div>
          </div>
      )
    })

    return _.chunk(sparts, 3).map(function(group) {
      return <div class="three column row">{group}</div>
    })
  }

  render() {
    return (
      <div class="ui equal width grid spart-container">
        {this.renderSpart()}
      </div>
    )
  }
}

function mapStateToProps(state) {
  console.log('mapStateToProps')
  console.log(state)
  return {
    sparts: state.sparts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ getSparts: getSparts }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Spart);

Действие 

export function getSparts() {
  const request = axios.get(`${BASE_URL}/sparts`)

  return {
    type: GET_SPARTS,
    payload: request
  }
}

Редуктор 

export default function(state = {}, action) {
  switch (action.type) {
  case GET_SPARTS:
    return [ action.payload.data, ...state ]
  default:
    return state;
  }
}

Промежуточное программное обеспечение 

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.getElementById('root'));

1 Ответ

0 голосов
/ 10 июня 2018

Это стандартная проблема для асинхронных операций, если вы не проверяете деталь рендеринга с условием.Используйте что-то вроде этого: 

{this.props.sparts.length > 0 && this.renderSpart()}

Одна проблема появляется после более глубокого изучения кода, действие getSparts () никогда не вызывается.Таким образом, решение вызывает его в подходящем методе жизненного цикла, таком как componentDidMount, как это сделал OP: 

componentDidMount() {
    this.props.getSparts();
}
...