Данные выборки пусты в componentwillMount в реакции родного редукса

Здравствуйте, я пытаюсь научиться реагировать на натив из курса Стивена Грайдера по реагированию на натив. Я застрял, чтобы загрузить данные из своего веб-сервиса и перечислить их с помощью redux и lodash. Я могу успешно получить данные и увидеть их в рендеринге (console. log) , но мои реквизиты всегда имеют значение null в componentDidUpdate или componentWillMount . Любая помощь приветствуется, спасибо. Редуктор такой;

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

person slayer35    schedule 30.12.2017    source источник
comment
Вы должны отправить свое действие из componentDidMount. См. reactjs.org/docs/react-component.html#componentwillmount.   -  person Carlos C    schedule 30.12.2017
comment
Откуда this.props.arr1?   -  person Carlos C    schedule 30.12.2017
comment
@CarlosC извините, я забыл изменить его, когда писал здесь. Это мой массив   -  person slayer35    schedule 30.12.2017
comment
Вы передаете mapDispatchToProps в connect(). Должно быть mapStateToProps.   -  person Adam Kipnis    schedule 30.12.2017
comment
@AdamKipnis Я исправляю это, но я написал это здесь неправильно. Извините   -  person slayer35    schedule 30.12.2017
comment
@CarlosC ЕСЛИ вы имеете в виду это, я пытаюсь понять, но все еще вижу, что myarray все еще пуст. componentDidMount() { this.props.getdata(); }   -  person slayer35    schedule 30.12.2017
comment
Вы просто передаете массив в источник данных, что не соответствует ожиданиям. Он ожидает ListViewDataSource. См. facebook.github.io/react-native/docs/listview.html. #источник данных   -  person Carlos C    schedule 30.12.2017


Ответы (1)


Я бы порекомендовал вам использовать FlatList, так как ListView устарел и имеет плохую производительность. А пока вы можете использовать приведенный ниже фрагмент кода, чтобы передать правильный объект в источник данных. Возможно, вам потребуется добавить несколько проверок null в зависимости от состояния данных, которые вы передаете 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
спасибо за ваш комментарий, я попробовал, но получил ошибку TypeError: невозможно преобразовать undefined или null в объект. Может быть, моя проблема в чем-то другом, я очень-очень новичок, чтобы реагировать, поэтому до сих пор не знаю некоторых основных вещей, я думаю. Кстати, я вижу, что мои данные json в mapStateToProps; console.log(state.testForm.dataSource) - person slayer35; 31.12.2017
comment
Я обновил, чтобы выполнить нулевую/неопределенную проверку. Я упомянул в своем комментарии, чтобы при необходимости сделать что-то подобное в зависимости от состояния ваших данных. - person Carlos C; 31.12.2017