Метод, возвращающий undefined, хотя выборка прошла успешно?

Question

У меня есть два компонента: клиент и приложение, а также функция выборки. Приложение является дочерним компонентом клиента. Я хочу обновить состояние клиента, используя значение, возвращаемое из метода, вызываемого приложением. Однако ответ состояния клиента после выборки не определен. Я не уверен, почему этот код не работает.

import React, { Component } from 'react';
import './App.css';  

function post(user, token, data){
  console.log('fetching...')
  fetch(`/project`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic '+ btoa(user+':'+token),
    },
    body: JSON.stringify(data)
  }).then(r => {
      if (!r.ok)
        throw Error(r.status);
      r.json().then(r => {return(r)});
  }).catch(error => {throw Error(error)})
}

class Client extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: '',
      token: '111',
      project: {'project':'demo'},
      response: {},
    };

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


  updateState(){
    const { user, token, project } = this.state;
    post(user, token, project).then(text => this.setState({ response: text 
  }));
  }

  render() {
    return (
        <App updateState={this.updateState}/>
    )
  }
}

class App extends Component {      
  render() {
    return (
      <div className="App">
          <button onClick={ () => {
             this.props.updateState()} }>Fetch Project</button>
      </div>
    );
  }
}

РЕДАКТИРОВАТЬ: Я изменил свой post () на это, и он работает :)

async function post(user, token, data){
  console.log('fetching...')
  const response = await fetch(`/project`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic '+ btoa(user+':'+token),
    },
    body: JSON.stringify(data)
  }).catch(error => {throw Error(error)});

  if(!response.ok)
    throw Error(response.status);
  
  const obj = await response.json();
  return(obj);
}

Answer 1

Если вы работаете с обещаниями, вы можете сделать что-то вроде этого.

import React, { Component } from "react";
    async function post() {
      // fetch //
      return await fetch("https://hipsum.co/api/?type=hipster-centric");
    }

    class Client extends Component {
      constructor(props) {
        super(props);
        this.state = {
          response: "12"
        };
        this.updateState = this.updateState.bind(this);
      }

      async updateState(res) {
        const text = await res().then(res => res.text());
        this.setState({ response: text });
      }

      render() {
        return (
          <>
            {this.state.response}
            <App updateState={this.updateState} />
          </>
        );
      }
    }

    class App extends Component {
      render() {
        return (
          <div>
            <button
              onClick={() => {
                this.props.updateState(post);
              }}
            >
              Fetch
            </button>
          </div>
        );
      }
    }

    export default Client;

песочница

Answer 2

Было бы неплохо узнать весь код функции выборки, но я думаю, что проблема в основном здесь:

this.props.updateState(post())

Этот вызов является синхронным, а процесс выборки - нет. Вам нужен лучший подход с ожиданием, обещаниями или обратным вызовом.