フェッチデータがコンポーネントウィルマウントで空です。ネイティブレスキュー

Question

こんにちは私は、スティーブングリッドの反応ネイティブコースから反応したネイティブを覚えようとしています。私は自分のウェブサービスからデータを読み込み、レビュックスとロダッシュを使ってリストします。データを正常に取得し、render（console.log）でそれを見ることができますが、私の小道具は常にcomponentDidUpdateまたはcomponentWillMountでnullです。 ご協力いただきありがとうございます。 減速機はこのようです。

import { TEST_FETCH, TEST_LOAD } from "../actions/types"; 

const INITIAL_STATE = { dataSource: [] }; 

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case TEST_FETCH: 
     return { ...state, loading: false, dataSource: action.payload.data }; 
    case TEST_LOAD: 
     return { ...state, loading: true, error: "" }; 
    default: 
     return state; 
    } 
}; 

です。

import { TEST_LOAD, TEST_FETCH } from "./types"; 
export const getdata = () => { 
    return dispatch => { 
    dispatch({ type: TEST_LOAD }); 
    fetch("http://myserver/getdata", { 
     method: "GET", 
     headers: { 
     Accept: "application/json", 
     "Content-Type": "application/json" 
     } 
    }) 
     .then(response => { 
     return response.json(); 
     }) 
     .then(responseData => { 
     return responseData; 
     }) 

     .then(data => { 
     // return data; 
     dispatch({ type: TEST_FETCH, payload: data }); 
     }); 
    }; 
}; 

です。

 import _ from 'lodash'; 
    import React, { Component } from "react"; 
    import { View, Text, ListView } from "react-native"; 
    import { connect } from "react-redux"; 
    import { getdata } from "../actions"; 

    class testList extends Component { 
     componentWillMount() { 
     this.props.getdata(); 
     } 
     componentDidMount() { 
     console.log(this.props.myarray); // myarray is empty 
     this.createDataSource(this.props.myarray); 
     } 

     componentDidUpdate() { 
     console.log(this.props.myarray); // I tried this but still myarray is empty 
     this.createDataSource(this.props.myarray); 
     } 
     createDataSource({ dtsource }) { 
// sure dtsource is null too 
     const ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.dataSource = ds.cloneWithRows(dtsource); 
     } 
     render() { 
    console.log(this.props.myarray); // if I write here,I can see my json's output 
     return <View> 
      <Text>Employee List</Text> 
      <ListView dataSource={this.props.myarray} renderRow={rowData => <Text 
       > 
        {rowData} 
       </Text>} /> 
      </View>; 
     } 
    } 

    const mapStateToProps = state => { 
     const myarray= _.map(state.testForm.dataSource, function(v) { 
     return { ...v }; 
     }); 
      return { myarray}; 
    }; 
    export default connect(mapStateToProps , { getdata })(testList); 

Answer 1

ListViewは廃止され、パフォーマンスが悪いので、FlatListを使用することをお勧めします。その間、以下のコードスニペットを使用して、正しいオブジェクトをdataSourceに渡すことができます。 myarrayに渡すデータの状態に応じて、nullのチェックを追加する必要があります。

import _ from 'lodash'; 
import React, { Component } from "react"; 
import { View, Text, ListView } from "react-native"; 
import { connect } from "react-redux"; 
import { getdata } from "../actions"; 

class testList extends Component { 

    constructor(props) {  
    super(props);    
    this.state = {  
    dataSource: new ListView.DataSource({  
     rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(props.myarray ? props.myarray : [])  
    };  
    } 

    componentDidMount() { 
    this.props.getdata(); 
    } 

    componentDidUpdate() { 
    this.setState({  
     dataSource: this.state.dataSource.cloneWithRows(props.myarray ? props.myarray : [])  
    }); 
    } 

    render() { 
    return <View> 
     <Text>Employee List</Text> 
     <ListView dataSource={this.props.myarray} renderRow={rowData => <Text 
      > 
       {rowData} 
      </Text>} /> 
     </View>; 
    } 
} 

const mapStateToProps = state => { 
    const myarray = _.map(state.testForm.dataSource, function(v) { 
    return { ...v }; 
    }); 
     return { myarray}; 
}; 
export default connect(mapStateToProps , { getdata })(testList);