Невозможно присвоить извлеченный json объекту в ReactJS с помощью setState, а затем извлечь его из состояния

Question

У меня есть ошибки:

Это мой вывод журнала консоли в Chrome 80:

react-dom.development.js:12212 Uncaught TypeError: Cannot read property 'bet_id' of undefined
    at App.placeBet (App.js:116)
    at Object.App.placeWin (App.js:100)
    at onComplete (Countdown.js:99)
    at index.js:1
    at basicStateReducer (react-dom.development.js:16445)
    at updateReducer (react-dom.development.js:16591)
    at updateState (react-dom.development.js:16640)
    at Object.useState (react-dom.development.js:17363)
    at useState (react.development.js:1619)
    at i (index.js:1)
    at CountdownCircleTimer (index.js:1)
    at renderWithHooks (react-dom.development.js:16260)
    at updateFunctionComponent (react-dom.development.js:18347)
    at beginWork$1 (react-dom.development.js:20176)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at scheduleUpdateOnFiber (react-dom.development.js:23709)
    at dispatchAction (react-dom.development.js:17076)
    at e (index.js:1)
App.js:162 get SUCC {"active":true,"bet_id":0,"id":1,"numerator":0,"stake":10,"username":"<removed from SO question>"}

Как видите, JSON получен успешно, а также this.setState (), похоже, работает с полученным объектом.

Структура json (полученная с помощью componentDidMount(){fetch( $ {this. props.api} / markets ){...}}):

[ 
    { 
        "bet_id":0,
        "event":"10",
        "name":"10-bet.png",
        "odds":{ 
            "numerator":10,
            "denominator":0
        }
    },
    ...
]

Я предполагаю, что это потому, что объект betSlip не заполнен или заполнен так, как он не обрабатывается дальнейшей логикой c. См. Код (с помощью «Аут из OKTA SDK, вы можете удалить эту часть для простоты) ниже.

Приложение. js

export default withAuth(class App extends Component {
  constructor(props) {
    super(props)
    this.state={
      hasError: false,
      markets: [],
      betSlip: [],
      winSlip: []}
   }

  componentDidMount() {
    fetch(`${this.props.api}/markets`)
    .then(res => res.json())
    .then(markets => this.setState({ markets }))
    .catch((error) => {
        this.setState(this.state.hasError);
        console.error(error);
      }
    );
  }

  addToSlip = (betid) => {
    const markets = this.state.markets;
    const newBet = markets.find(market => market.bet_id === betid);
    newBet.stake = '';

    const updatedMarkets = markets.map(market => toggleActiveStatus(market, betid, true));

    this.setState({
      betSlip: [
        ...this.state.betSlip,
      newBet
      ],
      markets: updatedMarkets
    });
  }

  placeBet = (action) => {
    const singleBet = this.state.betSlip[0];
    if (action==="win") {
      const body = {
        bet_id: singleBet.bet_id,
        username: this.state.user.name,
        stake: singleBet.stake,
        numerator: "0",
        active: "True",
        event: "win"
      };
      fetch(`${this.props.api}/bets`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(body)
      })
      .then((res) => res.json())
      .then((responseBetJson) => {
        this.setState({betSlip: responseBetJson})
        console.log("bet SUCC "+JSON.stringify(responseBetJson));
      })
      .catch((error) => {
        console.error(error)
        console.log("bet FAIL "+JSON.stringify(body))
      });
    } else if (action==="get") {
      fetch(`${this.props.api}/bets?bet_id=0`+
      `&username=`+this.state.user.name+
      `&stake=10`+
      `&numerator=0`+
      `&event=`+action+, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      })
      .then((res) => res.json())
      .then((responseGetJson) => {
        console.log("get SUCC "+JSON.stringify(responseGetJson))
        this.setState({betSlip: responseGetJson })
      })
      .catch((error) => {
        console.error(error)
        console.log("get FAIL")
      });
    }
  }

  render() {
    if (this.state.hasError) {
      return <h1>Error occured during reading Configuration!</h1>
    }
    return (
      <div className="Body">
        <Navigation />
        <div className="App">
          <main>
            <Countdown
              placeWin={this.placeWin}
            />
          </main>
          <MarketsListContainer
            addToSlip={this.addToSlip}
            markets={this.state.markets}
          />
        </div>
      </div>
    )
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>