反應獲取的數據在渲染中不起作用

Question

我正在從API獲取數據，該API基於從父元素作為道具傳遞的ID。 除了一切，當我嘗試渲染數據時，它什么都沒有顯示，我的一切工作都很好。 提取成功，因為ComponentWillReceiveProps中的console.log恰好顯示了我所需要的。

碼：

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>
                ...

ComponentDidMount中的{this.state.team2}可以工作，但是componentWillReceiveProps中的{this.state.testTeam}不能工作，即使在console.log中也存在。 我是否在這里錯過了一些簡單的問題，或者可能是什么問題？ 感謝您的任何幫助。

Answer 1

使用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);
      })
    }
  }