React Redux 数组属性为空

Question

我对 React 还很陌生，并且搜索了很多 StackOverflow 响应，但没有任何乐趣。因此，当将一个员工数组传递给 reducer，然后传递给组件时，prop 第一次是空的，然后包含后续渲染的数据。有谁知道在员工道具包含数据之前如何防止反应渲染？

--------更新

所以我将 isloading 添加到减速器初始状态并尝试将其发送到组件但我收到一个非常可怕的错误

TypeError：在这种环境中，assign 的来源必须是一个对象。此错误是性能优化，不符合规范

这是我更新的案例陈述

case EMPLOYEES_FETCH_SUCCESS:
 return {

 list: action.payload, 
    isloading: false 

} 

New error message

非常感谢

填充后的数据数组如下所示

data structure

减速器代码：

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

};

Answer 1

有谁知道如何防止反应渲染，直到员工 props 包含数据？

当然，只需检查并返回 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>
  );
}

Answer 2

您的商店可以有两个属性。一个用于员工列表，另一个用于加载状态。

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