ReactJS - Axios не возвращает данные

Question

У меня есть этот код для получения данных с Axios. К сожалению, этот код не работает, потому что console.log(response); не регистрирует какие-либо данные в консоли. Что здесь не так? Чего-то не хватает?

const ROOT_URL = "https://jsonplaceholder.typicode.com";

const getFindAll = (data) => {
  return {
    type: constants.FETCH_FIND_ALL,
    payload: data
  }
}

export const fetchFindAll = () => {
  return (dispatch) => {
    axios({
      method: 'put',
      url: `${ROOT_URL}/posts/1`
    })
      .then(response => {
       console.log(response);
        dispatch(getFindAll(response.data.Body.Message));
      })
      .catch(error => {
        //TODO: handle the error when implemented
      })
  }
}

Я звоню fetchFindAll() внутри FileTree компонента:

export class FileTree extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeNode: null };
    console.log('ldirj', props)

    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({ activeNode: name });
    this.props.liftStateUp(name);
  }

  componentWillReceiveProps({ searchTerm }) {
    this.setState({ searchTerm });
  }

    renderFindAll () {
      const fetch = this.props.fetchFindAll();
      fetch(this.props.dispatch);
      console.log(fetch);
  }

  componentDidMount () {
    this.renderFindAll();
  }

  render() {
    return (
      <div className="grid__item-50">
        {renderTree(this.props.root, this.setActiveNode, this.state.activeNode, null, this.state.searchTerm)}
      </div>
    );
  }
}

Answer 1

Вызов fetchFindAll() даст вам функцию закрытия.

Чтобы вызвать запрос, вам нужно вызвать его с помощью fetchFindAll()(dispatch)

fetchFindAll не принимает никаких аргументов, поэтому передача ему this.state не будет иметь никакого значения.

Кроме того, вызов fetchFindAll несколько раз даст вам несколько функций закрытия.

В заключение, вы должны сделать что-то вроде этого:

renderFindAll () {
  const fetch = this.props.fetchFindAll();
  fetch(this.props.dispatch); // assuming you are using react-redux
}

---- РЕДАКТИРОВАТЬ ----

Попробуйте реализовать componentDidMount:

componentDidMount () {
  this.renderFindAll();
}

Answer 2

Ладно, звучит так, будто некоторые вещи типа "реагируй / реагируй" приводят тебя сюда У меня было немного времени, и я решил смоделировать, как это может работать здесь:

https://codesandbox.io/s/8n9vvz6lx9 (Я не настраивал никакие редукторы / переменные состояния - вы должны увидеть ответ в devtools - console)

Я постараюсь не вдаваться в подробности относительно информации, которую вы можете найти в документации (это очень хороший ресурс, а также учебники, которые вы можете найти там).

Redux документы: https://redux.js.org/

Если у вас возникли проблемы с пониманием архитектуры реагирующих компонентов, достаточно документации и руководств по реагированию. (https://reactjs.org/) Полагаю, вы уже на это смотрите.

Redux действительно мощный, но может немного сбить с толку, поэтому я попытаюсь детализировать вещи, которые я заметил в коде, который вы предоставили (помните, что вы можете знать некоторые из этих вещей, а можете и не знать). включили их в ваш код здесь)

1: dispatch должен откуда-то прийти, реагировать на редукцию connect (https://github.com/reduxjs/react-redux):

import { connect } from "react-redux";

// ...

const mapDispatchToProps = (dispatch, ownProps) => ({
  dispatch
});

export default connect(null, mapDispatchToProps)(FileTree);

2: Ваше действие также должно быть куда-то импортировано:

import { fetchFindAll } from "../actions";

// ...

renderFindAll() {
    const fetch = fetchFindAll();
    fetch(this.props.dispatch);
    console.log(fetch);
}

3: для большинства компонентов вы хотите export default в зависимости от того, как вы планируете импортировать.

4: В общем, вы можете использовать метод пут, но вы, скорее всего, захотите использовать axios.get('${URL}')

5: Посмотрите на данные ответа, которые вы получаете (используя запрос пут):

Внутри response.data есть {id: 1}, поэтому вызов response.data.Body.Message приведет к ошибке. Весьма вероятно, что вы хотели использовать здесь запрос get, который бы дал вам следующее:

, у которого до сих пор нет response.data.Body.Message, но, возможно, это ближе к тому, что вы намеревались.

Хорошо, очень надеюсь, что это поможет! Удачи!

Answer 3

this.props.fetchFindAll (this.state)

Вызов этой функции ничего не делает, кроме возврата функции ((dispatch) => { ... }) (которую вы игнорируете).

Вам нужно либо вызвать возвращенную функцию, либо переписать fetchFindAll, чтобы она выполняла работу самого (dispatch) => { ... }.

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