Ambil data kosong di componentwillMount di redux asli reaksi

Halo, Saya mencoba mempelajari reaksi asli dari kursus reaksi asli Stephen Grider. Saya terjebak saat memuat data dari layanan web saya dan mencantumkannya dengan menggunakan redux dan lodash. Saya berhasil mendapatkan data dan melihatnya di render (konsol. log) , namun alat peraga saya selalu nol di komponenDidUpdate atau komponenWillMount . Bantuan apa pun dihargai, terima kasih. Peredamnya seperti ini;

    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;
  }
};

dan tindakan adalah;

    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 });
      });
  };
};

dan halaman adalah ;

       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);

person slayer35    schedule 30.12.2017    source sumber
comment
Anda harus mengirimkan tindakan Anda dari komponenDidMount. Lihat reactjs.org/docs/react-component.html#componentwillmount.   -  person Carlos C    schedule 30.12.2017
comment
Dari mana asal this.props.arr1?   -  person Carlos C    schedule 30.12.2017
comment
@CarlosC maaf, saya lupa mengubahnya saat menulis di sini. Ini adalah myarray   -  person slayer35    schedule 30.12.2017
comment
Anda meneruskan mapDispatchToProps ke connect(). Seharusnya mapStateToProps.   -  person Adam Kipnis    schedule 30.12.2017
comment
@AdamKipnis Saya memperbaikinya, tapi saya salah menulisnya di sini. Maaf   -  person slayer35    schedule 30.12.2017
comment
@CarlosC JIKA maksud Anda demikian, saya coba mengetahuinya tetapi masih melihat array saya, masih kosong. komponenDidMount() { ini.props.getdata(); }   -  person slayer35    schedule 30.12.2017
comment
Anda baru saja meneruskan array ke dataSource yang tidak diharapkan. Ia mengharapkan ListViewDataSource. Lihat facebook.github.io/react-native/docs/listview.html #sumberdata   -  person Carlos C    schedule 30.12.2017


Jawaban (1)


Saya akan merekomendasikan Anda untuk menggunakan FlatList karena ListView sudah tidak digunakan lagi dan memiliki kinerja yang buruk. Sementara itu, Anda dapat menggunakan cuplikan kode di bawah untuk meneruskan objek yang benar ke dataSource. Anda mungkin perlu menambahkan beberapa pemeriksaan null bergantung pada status data yang Anda teruskan ke myarray.

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);
person Carlos C    schedule 30.12.2017
comment
terima kasih atas komentar Anda, saya mencobanya tetapi mendapat kesalahan TypeError: Cannot convert unfined or null to object . Mungkin masalah saya adalah sesuatu yang berbeda, saya masih sangat baru dalam bereaksi jadi saya kira masih belum mengetahui beberapa hal mendasar. Omong-omong, saya bisa melihat data json saya di mapStateToProps; konsol.log(negara.testForm.dataSource) - person slayer35; 31.12.2017
comment
Saya memperbarui untuk melakukan pemeriksaan nol/tidak terdefinisi. Saya menyebutkan dalam komentar saya untuk melakukan hal seperti itu jika perlu berdasarkan keadaan data Anda. - person Carlos C; 31.12.2017