Question

我有一个从服务器检索数据的提供程序：

setOpciones() {
  this.http.get(this.url, {}, {}).then(response => {
    this.opciones = JSON.parse(response.data);

  }).catch(error => {
    console.log(error);
  });
}

getOpciones(){
  return this.opciones;
}

在页面中，我设置了一个要打印的变量：

ionViewDidLoad() {
    this.items = this.data.getOpciones();
}

我现在就明白，当this.opciones更改不会影响this.items

我如何做到使其不断变化？

Answer 1

最好在http回调中设置变量（在模板中使用），而不是在组件的生命周期（即ngOnInit）中进行设置。这是您唯一真正知道拥有新数据的时间。

通常，最好对http使用Observable / subscribe语法。

例如...

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

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      teamID: 5,
      teamName: '',
      rosterName: [],
      isLoaded: false,
    }
  }

  componentDidMount(){

// variable to fetch the basic team info
const teamData = fetch('https://statsapi.web.nhl.com/api/v1/teams/' + this.state.teamID,{
  method: 'GET'
})

// variable to fetch the basic player info on the team
const playerData = fetch('https://statsapi.web.nhl.com/api/v1/teams/' + this.state.teamID + '/roster',{
  method: 'GET'
})

Promise.all([teamData, playerData])
  .then(([res1 , res2]) => Promise.all([res1.json(), res2.json()]))
  .then(([json1, json2]) => {
    this.setState({
      isLoaded: true,
      teamName: json1,
      rosterName: json2,
      })

      for (let i = 0; i < this.state.rosterName.roster.length; i++){
        console.log(this.state.rosterName.roster[i].person.id)
      }

    })
    .catch(e => {
      console.log(e)
    })
}


render() {
let {isLoaded, rosterName, teamName} = this.state;
var playerID = [];

if(!isLoaded){
  return(
    <h1>loading...</h1>
  )
}else{
  return (
    <div>
      <h1>{teamName.teams[0].name} Roster</h1>

      // map the roster and give each return a value of index
      {rosterName.roster.map(function(x, index){
            playerID.push(rosterName.roster[index].person.id)
            return(
                <div key={index}>
                  <h3 className="playerCard" key={ index }>{rosterName.roster[index].person.fullName} #{rosterName.roster[index].jerseyNumber}</h3>
                  <p>{playerID[index]}</p>

                </div>
            )
        })}
    </div>
  );
}
  }
}

export default App;

即。触发更改的事件（http响应）需要更新变量（项目）。

提供者收到新数据时更新页面

1 个答案: