ReactRedux массив проп пуст - PullRequest
Новая
       19

ReactRedux массив проп пуст

0 голосов
/ 12 мая 2018

Я довольно новичок в React и перебрал множество ответов StackOverflow, но без радости.Поэтому, когда массив сотрудников передается редуктору, а затем компоненту, реквизит в первый раз пуст, а затем содержит данные о последующих рендерах.Кто-нибудь знает, как предотвратить реакцию рендеринга до тех пор, пока реквизиты сотрудников не содержат данных?

-------- Обновление

Поэтому я добавил isloading в исходное состояние редуктора и попытался отправить егок компоненту, но я получаю действительно ужасную ошибку

TypeError: В этой среде источники для назначения ДОЛЖНЫ быть объектом.Эта ошибка является оптимизацией производительности и не соответствует спецификациям

Это мое обновленное описание дела 

case EMPLOYEES_FETCH_SUCCESS:
 return {

 list: action.payload, 
    isloading: false 

}

Новое сообщение об ошибке

Большое спасибо

массив данных выглядит так, когда он заполнен

структура данных

Код редуктора: 

import { EMPLOYEES_FETCH_SUCCESS, USER_ADD } from "../actions/types";

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMPLOYEES_FETCH_SUCCESS:
      return action.payload;

    case USER_ADD:
      return state;

    default:
      return state;
  }
};

это мое действиесправка о доставке 

dispatch({ type: EMPLOYEES_FETCH_SUCCESS, payload: returnArray });

Код компонента: 

  componentWillMount() {
    this.props.employeesFetch();

    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
  }

  createDataSource({ employees }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(employees);
  }

  onButtonPress() {
    Actions.GroupChatContainer(); //Need to send bar's chat record
  }

  renderRow(employee) {
    return <ListItem employee={employee} />;
  }

  render() {
    console.log(this.props.employees);

    return (
      <View>
        <ListView
          style={styles.listStyle}
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow}
        />

        <Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
      </View>
    );
  }
}


const mapStateToProps = state => {
console.log(state.employees);


  const employees = _.map(state.employees, (val, uid) => {
    return { ...val, uid };
  });

  return { employees };

};

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Вы можете иметь два свойства для вашего магазина.Один для списка сотрудников и другой для состояния загрузки. 

import { EMPLOYEES_FETCH_SUCCESS, USER_ADD } from "../actions/types";

const INITIAL_STATE = {
   list: [],
   isLoading: true,
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMPLOYEES_FETCH_SUCCESS:
      return {
         list: action.payload,
         isLoading: false,
      }

    default:
      return state;
  }
};

И в render, если состояние загружается, возвратное представление загрузки 

render() {
  if (!this.props.employees.isLoading) {
    return <div>Loading...</div>;
  }
  ...
  ...  
}
0 голосов
/ 12 мая 2018

Кто-нибудь знает, как предотвратить реагирование рендеринга, пока сотрудники реквизит содержит данные?

Конечно, просто сделайте проверку и верните null: 

render() {
  if (!this.props.employees) {
    return null;
  }

  return (
    <View>
      <ListView
        style={styles.listStyle}
        enableEmptySections
        dataSource={this.dataSource}
        renderRow={this.renderRow}
      />

      <Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
    </View>
  );
}

или внутри JSX: 

render() {    
  return (
    <View>
      {this.props.employees &&
        <ListView
          style={styles.listStyle}
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow}
        />
      }

      <Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
    </View>
  );
}
...