가져 오기 데이터가 구성 요소에서 비어 있습니다. 응답 원시 내림차순

Question

안녕하세요 저는 Stephen Grider의 반응 기본 과정에서 네이티브 반응을 배우려고합니다. 저는 웹 서비스에서 데이터를로드하고 redux 및 lodash를 사용하여 목록을 만듭니다 .I 성공적으로 데이터를 가져올 수 있으며 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);