陣營本地的setState（...）既componentWillMount和componentDidMount

Question

警告

我開始有反應過來母語，在我的項目，我到了一個地步，一切正常，但有這樣的警告：

Warning: setState(...): Can only update a mounted or mounting component.

所以，我看了幾個QA，嘗試了幾個解決方案（從componentWillMount和componentDidMount更改setState()的呼叫），但......警告總是在那裏。

下面是代碼的一部分：

REQUEST_URL = 'http://url/users.php'; 

(...) 

module.exports = React.createClass({ 
    getInitialState: function() { 
     return { 
      uid: null, 
      bid: null, 
      username: null, 
     } 
    }, 

    componentDidMount: function() { 
     this.fetchData(); 
    }, 
    fetchData: function() { 
     fetch(REQUEST_URL) 
      .then((response) => response.json()) 
      .then((json) => { 
       console.log('setState called'); 
       this.setState({ 
        uid: json.users[0].user_id, 
        bid: json.users[0].building_id, 
        username: json.users[0].username 
       }); 
      }) 
      .done(); 
    }, 
    render: function() { 
     if (!this.state.uid) { //user is not defined 
      console.log('not rendered'); 
      return <Text>chargement...</Text> 
     } 
     // else 
     console.log('rendered'); 
     var userId = this.state.uid; 
     var buildingId = this.state.bid; 
     var username = this.state.username; 

     return (
      <View style={styles.content}> 
       <Text style={styles.label}>User Id</Text> 
       <Text>{userId}</Text> 

       <Text style={styles.label}>Building Id</Text> 
       <Text>{buildingId}</Text> 

       <Text style={styles.label}>Username</Text> 
       <Text>{username}</Text> 
      </View> 
     ) 
    }, 
}); 

的users.php返回一個JSON內容類型。

任何線索？

Thanx。

Answer 1

問題可能是在一次渲染中反覆重新安裝某些組件（認爲這與初始值的表示有關，在此找不到問題），因此您的state將被設置爲未安裝的組件。

如果您將state設置爲可在組件卸載時清除的解耦超時，則可以避免在未安裝的組件上設置狀態。

componentDidMount() { 
    this.mounted = true; 
    // this.fetchTimeout = setTimeout(()=>{ 
    this.fetchData(); 
    // }); 
}, 
componentWillUnmount() { 
    // clearTimeouts(this.fetchTimeout); 
    this.mounted = false; 
}, 
fetchData() { 
    fetch(REQUEST_URL) 
     .then((response) => response.json()) 
     .then((json) => { 
      console.log('setState called'); 
      if (this.mounted === true){ 
       this.setState({ 
        uid: json.users[0].user_id, 
        bid: json.users[0].building_id, 
        username: json.users[0].username 
       }); 
      } 
     }) 
     .done(); 
}, 

我仍然不知道我們是否應該使用TimerMixins但這種方式沒有這些工作。 （TimerMixins採取清除所述組分的任何超時或間隔組保健）

編輯：更新樣本僅呼叫仍安裝在部件的setState。 我不知道是否有更好的方法，但據我所知，直到現在，你不能取消提取請求。