反應原生我的應用程序不會顯示來自 API GET 調用的任何結果

Question

這是我的代碼它應該可以工作，但不知何故它沒有。 我也嘗試過使用這個 JSON https://reactnative.dev/movies.json但我也得到了相同的結果

export default class App extends Component {
constructor() {
  super();
  this.state = {
    data: []
  }
}

componentDidmount() {
fetch('http://192.168.1.4:8080/api', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(result => {

               data = result});
}



render() {

  return (
    <View>
      <Text 
        style = {{fontSize: 18}}>
        Display API JSON DATA
    </Text>
    <FlatList
    data = { this.state.data }
    renderItem= { ({item}) =>
    <View>
    <Text>{item.title}</Text>
    <Text>{ this.state.data }</Text>
    </View>

    }
    />
    </View>
  )
}


}

這是我的 JSON 文件

 [{"price":3,"_id":"5f32d2f3f995eb0013ff4be7","title":"new book","__v":0},]

結果如下

Answer 1

使用this.setState()設置你的組件狀態。 學到更多

componentDidmount() {
fetch('http://192.168.1.4:8080/api', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(result => {
                   this.setState({data: result})
});
}

Answer 2

你有沒有檢查過在平面列表之前在渲染中做 console.log 嗎？ this.state.data 包含什么