當一個變量正在更新reactjs，以及如何強制更新

我想明白了，我知道當我CONSOLE.LOG（圖片）我得到的最終結果當一個變量正在更新reactjs，以及如何強制更新

，當我「的console.log （JSON.stringify（圖片））「我得到當前的那一刻。

爲什麼在那一刻做時，它記錄了第二個選項，該數組爲空，最後它得到的值，

我怎麼能強制值的同步和this.state

的問題是，當我發送到底：

的ImageList圖片= {this.state.picturesArr} />

它被送到空

let pictures = []; 
let urls =[]; 
let titles=[]; 
let nextpage =''; 
let pageback=''; 

class App extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      picturesArr: [], 
      urlArr: [], 
      titleArr:[], 
      nextPage:'', 
      prevuisPage:'' 
     }; 

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

    loadSubreddit(subre) { 

     reddit.hot(subre).limit(5).fetch(function(res) { 
      console.log(res); 
      nextpage = res.data.after.toString(); 
      // pageback = res.data.before.valueOf(); 

      for (let i = 0; i < res.data.children.length; i++){ 
       pictures.push(res.data.children[i].data.url); 
       urls.push(res.data.children[i].data.permalink); 
       titles.push(res.data.children[i].data.title); 
      } 
     }); 

     this.setState({ 
      picturesArr: pictures, 
      urlArr: urls, 
      titleArr: titles, 
      nextPage: nextpage, 
      prevuisPage: pageback 
     },() => { 
      console.log(this.state) 
     }); 

     console.log(pictures); 
     console.log(JSON.stringify(pictures)); 
    } 


    componentWillMount() { 
     console.log('comp is mounting'); 
     this.loadSubreddit('cats'); 
    } 

    render() { 
     return (
      <div className="App"> 
      <div className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 
       <h2>Welcome to React</h2> 
      </div> 
       <Col sm={8} md={10} smOffset={2} mdOffset={1} > 
        <ImageList pics={this.state.picturesArr} /> 
       </Col> 
      </div> 
     ); 
    } 
} 

export default App;

來源

2017-05-03 Ben Porat

可能重複[如何從異步調用返回響應？]（http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an -asynchronous-call），您嘗試以同步方式使用異步結果。這是不可能的。你需要在回調中調用setState。 –

在您所提供的代碼，你叫this.setState外的API調用回調。您需要（1）在回調中移動用於設置狀態的代碼，（2）將回調函數綁定到組件實例以訪問它的this.setState。

固定的loadSubbreddit功能如下所示。

loadSubreddit(subre) { 

    reddit.hot(subre).limit(5).fetch(function(res) { 
     console.log(res); 
     nextpage = res.data.after.toString(); 
     // pageback = res.data.before.valueOf(); 

     for (let i = 0; i < res.data.children.length; i++){ 
      pictures.push(res.data.children[i].data.url); 
      urls.push(res.data.children[i].data.permalink); 
      titles.push(res.data.children[i].data.title); 
     } 

     this.setState({ 
      picturesArr: pictures, 
      urlArr: urls, 
      titleArr: titles, 
      nextPage: nextpage, 
      prevuisPage: pageback 
     },() => { 
      console.log(this.state) 
     }); 

     console.log(pictures); 
     console.log(JSON.stringify(pictures)); 
    }.bind(this)); 
}

來源

2017-05-03 14:36:51 ArneHugo

正確。現在'圖片'不一定是一個全局變量。 –

謝謝！所以只是爲了確保我得到了我的錯誤，當使用this.setState時，它需要在api回調（我需要更多地瞭解它），，因爲另一個執行上下文是爲內部函數i需要綁定「this」，所以它會指向現有的狀態 –

在進行一般的API調用時，您需要等待響應，然後才能存儲它。你也可以在api-call回調之外使用'setState'，但是如果你想等待api-call的迴應則不行。 – ArneHugo

當一個變量正在更新reactjs，以及如何強制更新

回答

相關問題