Реакция извлеченных данных не работает в рендере - PullRequest
Новая
       25

Реакция извлеченных данных не работает в рендере

0 голосов
/ 01 мая 2018

Я получаю данные из API на основе идентификатора, который был передан в качестве реквизита от родительского элемента. У меня все работает хорошо, за исключением того, что когда я пытаюсь отобразить данные, ничего не отображается. Выборка успешна, потому что console.log внутри ComponentWillReceiveProps показывает именно то, что мне нужно.

Код: 

import React, { Component } from "react";

const teamAPI = 'http://localhost:8080/api/teams/'
const playerAPI = 'http://localhost:8080/api/playersByTeam/'
const matchAPI = 'http://localhost:8080/api/match/'

class View extends Component {

  constructor() {
    super();
    this.state = {
      data: [],
      playersData: [],
      update: [],
      team1: [],
      team2: [],
      matchData: [],
      testTeam: [],
    };
  }

  componentWillReceiveProps(newProps) {
    if (newProps.matchId !== this.props.matchId) {
      fetch(matchAPI + newProps.matchId)
      .then((matchResponse) => matchResponse.json())
      .then((matchfindresponse) => {
        console.log(matchfindresponse.team1.name);
        console.log(this.props.matchId + ' ' + newProps.matchId);
        this.setState({
          testTeam:matchfindresponse.team1.name,
        })
      })
    }
  }

  componentDidMount() {
  const promises = [
    fetch(teamAPI).then(resp => resp.json()),
    fetch(playerAPI + 82).then(resp => resp.json())
  ];
  Promise.all(promises).then(([teamData, playerData]) => {
    console.log(teamData);
    console.log(playerData);
    this.setState({
      team1:teamData[0].name,
      team2:teamData[1].name,
      playersData: playerData,
    })
  });
}

  reply_click = id => {
    return () => {
        this.setState({ targetId: id })
    }
  }

  updateScore() {
    fetch('http://localhost:8080/api/updateMatch?matchId=15&result=2:2')
  }

  render() {
    return (
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron text-center">
              <form>
                <div class="form-group">
                  <label for="teamSelect">Select team:</label>
                    <select class="form-control" id='?' onChange={this.reply_click}>
                      <option>{this.state.testTeam}</option>
                      <option>{this.state.team2}</option>
                    </select>
                </div>
                ...

{this.state.team2} из ComponentDidMount работает, но {this.state.testTeam} из componentWillReceiveProps - нет, даже если в console.log он существует. Я что-то упускаю здесь или в чем проблема? Спасибо за любую помощь.

1 Ответ

0 голосов
/ 01 мая 2018

Получил это, используя localStorage. 

  componentWillReceiveProps(newProps) {
    if (newProps.matchId !== this.props.matchId) {
      fetch(matchAPI + newProps.matchId)
      .then((matchResponse) => matchResponse.json())
      .then((matchfindresponse) => {
        console.log(matchfindresponse.team1.name);
        console.log(this.props.matchId + ' ' + newProps.matchId);
        this.setState({
          testTeam:matchfindresponse.team1.name,
        })
        var team1 = localStorage.setItem('team1', matchfindresponse.team1.name);
        var team2 = localStorage.setItem('team2', matchfindresponse.team2.name);
      })
    }
  }
...