Невозможно вызвать функцию после извлечения данных в componentDidMount

Question

Я работаю над приложением для интернет-форума в reactjs + redux, и у меня возникла проблема при отображении сообщений определенных форумов. Мне нужно вызвать функцию loadPosts после того, как приложение выберет данные из хранилища в componentDidMount.

Я пытался использовать this.props.fetchForums().then(loadPosts()), однако выдает ошибку TypeError: Cannot read property 'then' of undefined. При поиске в Интернете я сталкивался с тем, что многие люди решают эту проблему, используя функцию извлечения в самом компоненте, но я пытаюсь создать правильное приложение для внешнего интерфейса, поэтому я бы хотел найти другое решение.

Это функция fetchForums в моем actionCreator:

export const  fetchForums = () => dispatch => {
    fetch('http://localhost:7373/forum/all?page=0&size=2')
        .then(response => response.json())
        .then(forums => dispatch({
            type: 'FETCH_FORUMS',
            payload: forums.content
        }));

};

А вот и проблемный код:

class RenderLilPosts extends Component {

    componentDidMount() {
        this.props.fetchForums();
        //Here I would like to call loadPosts
    }


    loadPosts() {
        let list = this.state.posts;
        this.props.posts.map(post => {
            list.push(post);

        });
        this.setState(
            {
                posts: list
            }
        );
    }
}

RenderLilPosts.propTypes = {
    fetchForums: PropTypes.func.isRequired,
    forums: PropTypes.array.isRequired
};

const mapStateToProps = state => ({
        posts: state.forums.posts,
        forums: state.forums.storage
});

const mapDispatchToProps = (dispatch) => ({
    fetchForums: () => {
        dispatch(fetchForums())
    }
});

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

Я пропустил некоторые части кода, чтобы сделать его более читабельным, надеюсь, я не пропустил ничего важного. С функцией fetchForums проблем, безусловно, не возникает, поскольку при вызове с помощью кнопки она должна это делать. Просто я не знаю, как это назвать ПОСЛЕ получения данных. Спасибо за ваши ответы.

Answer 1

Просто добавьте return перед fetch в вашем действии. Это вернет обещание. Без этого undefined возвращается неявно, что, очевидно, не является обещанием. Вот почему вы получаете Cannot read property 'then' of undefined.

export const fetchForums = () => dispatch => {
  return fetch('http://localhost:7373/forum/all?page=0&size=2')
    .then(response => response.json())
    .then(forums =>
      dispatch({
        type: 'FETCH_FORUMS',
        payload: forums.content
      })
    );
};

Или вы можете удалить фигурные скобки. Это немного упростит код, и вам не нужно писать return.

export const fetchForums = () => dispatch =>
  fetch('http://localhost:7373/forum/all?page=0&size=2')
    .then(response => response.json())
    .then(forums =>
      dispatch({
        type: 'FETCH_FORUMS',
        payload: forums.content
      })
    );

У вас также есть небольшая проблема в том, как вы используете цепочку fetchForums и loadPosts. Должно быть: this.props.fetchForums().then(() => loadPosts()). Это полезно, если вам нужно передать параметры от вашего первого звонка. Или this.props.fetchForums().then(loadPosts)

Существует еще один современный подход, использующий ключевые слова async и await, но для этого вам могут понадобиться дополнительные инструменты, такие как babel.

async componentDidMount() {
  await this.props.fetchForums();
  loadPosts()
}

Обратите внимание, что если ваш второй вызов не зависит от результата первого вызова, вам не нужно ждать или связывать вызовы с обещаниями.

И, вероятно, ваша loadPosts функция должна быть также избыточной, наряду с fetchForums. Использование состояния для сообщений в этом случае нецелесообразно, возможно, вы можете передавать сообщения с подпорками и использовать их напрямую, а не сохранять в состоянии.