javascript .map不能與原生反應

-1

我不知道我是否忘記了什麼，但.map未返回預期的組件。javascript .map不能與原生反應

這是我的代碼：

data(){ 
     var user = firebase.auth().currentUser; 
      var uid = user.uid; 
      axios.get('apilink here'+user.uid).then(function(response){ 
      var arr = Object.values(response.data); 
      var listItems = arr.map(function(item){ 
       return <Text>{item.name}</Text> 
      }) 
      }) 
     }

，這就是我的渲染：

render() { 
     return (
      <Container style={{backgroundColor:'#F7F7F7'}}> 
      <Content> 
       {this.data} 
      </Content> 
      </Container> 
     ) 
     } 
    }

來源

2017-03-16 Con bit

'不工作'是什麼意思？不工作如何？任何錯誤？如果是這樣，什麼？ –

是不是無效的JavaScript？「<」被解釋爲「小於」，並且「>」被解釋爲「大於」。你的意思是把它放在一個字符串中嗎？ –

你可以在這裏粘貼你的樣本響應對象嗎？ - >'response.data' –

的問題是，你不能在你的渲染方法是直接用你的data()功能，因爲它是異步。

您需要使用組件狀態，該組件狀態將在API響應之後設置。

比方說這是你的組件：

export default class App extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     data: null 
    } 
    this.getData() 
    } 
    getData =() => { 
    var user = firebase.auth().currentUser; 
    var uid = user.uid; 
    axios.get('apilink here'+user.uid).then(function(response){ 
     var arr = Object.values(response.data); 
     var listItems = arr.map(function(item){ 
     return <Text>{item.name}</Text> 
     }) 
     this.setState({data: listItems}) 
    }) 
    } 
    render() { 
    return (
     <Container style={{backgroundColor:'#F7F7F7'}}> 
     <Content> 
      {this.state.data} 
     </Content> 
     </Container> 
    ); 
    } 
}

這將讓你加載狀態異步響應您的組件

來源

2017-03-16 17:12:42

你以錯誤的方式接近這一點。你的data函數首先沒有返回任何東西，所以它不會在你的渲染方法中顯示任何東西。你可以通過調用你的函數來調試，你會看到返回的值是undefined。

你從遠程資源根據DOCS一個很好的做法加載數據，在componentDidMount來處理這個問題：

componentDidMount（）後，分量安裝立即調用。需要DOM節點的初始化應該放在這裏。 如果你需要從遠程端點加載數據，那麼 例示網絡請求。設置此方法的狀態將會觸發重新渲染。

所以一個解決這個辦法是將你的data代碼到componentDidMount()，一旦數據被檢索到的更新組件的狀態。類似這樣的：

... 
constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
} 

componentDidMount() { 
    var user = firebase.auth().currentUser; 
    var uid = user.uid; 
    axios.get('apilink here' + user.uid) 
    .then(function(response){ 
     var arr = Object.values(response.data); 
     this.setState({ data: arr }); 
    }); 
} 

render() { 
    return (
    <Container style={{backgroundColor:'#F7F7F7'}}> 
     <Content> 
     { 
      this.state.data 
      .map(function(item) { 
       return <Text>{item.name}</Text> 
      }) 
     } 
     </Content> 
    </Container> 
) 
}

來源

2017-03-16 17:15:24 G4bri3l

javascript .map不能與原生反應

回答

相關問題