Изменение состояния с ответом от внутреннего экспресс-сервера

Question

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

Оба сервера работают на разных портах и ​​правильно взаимодействуют.

App.js (передний конец)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResponse: '',
      products: ''
    };
  }

  // Fetch a varying API route based on the argument
  callAPI(x) {
    fetch("http://localhost:8080/" + x)
      .then(res => res.json())
      .then(res => this.setState({ apiResponse }))

      .catch(err => err);
  }

<Button
    onClick={(e) => { e.preventDefault(); this.callAPI('api') }}
    type="success"
    className="input-lg">
    Records
</Button>

api.js (Back end)

router.get('/api', function (req, res) {
   axios.get('https://.......................',  config)
        .then((res) => {
            console.log(res.data);
        })
        .catch((error) => {
            console.log(error);
        });
})

Любая помощь очень ценится!

Answer 1

Вам необходимо связать callAPI в конструкторе

constructor(props) {
  super(props);
  this.state = {
    apiResponse: '',
    products: ''
  };

  this.callAPI = this.callAPI.bind(this); // bind callAPI

}

https://reactjs.org/docs/handling-events.html

Answer 2

Вот пример простого вызова API и последующей выборки в состояние.

class MyComponent extends Component{
    state ={
        data : null
    }
    //Ideal place to fetch data
    componentDidMount(){
        axios.get('myapi/data')
            .then(res => this.setState({ data }))
    }
    render(){
        return(
            <div>
                {data}
            </div>
        )
    }
 }

Таким образом вы убедитесь, что данные отображаются только после завершения вызова API. При первом рендеринге data prop будет иметь значение null, поэтому ваш компонент будет рендерить только пустой div, как только вызов будет выполнен в componentDidMount и преобразован в фактические данные, then вы обновите свое состояние

Answer 3

Вы уже пытались работать с ответом на перенаправление?

Это так:

    return axios.get('https://.......................',  config)
         .then((resp) => {
            const url = "http://<yourfront:yourport>/"
                    .concat("?yourData="+resp.data);
            res.location(url.toString());
            res.status(301);
            res.end();
            return;
         })
        .catch((error) => {
           console.log(error);
        });

Итак, когда фронт получает этот ответ, фреймворк знает, что ему нужно изменить свое состояние.