Question

我对React很新，并且已经搜索了很多StackOverflow响应，但没有任何乐趣。因此，当将一组雇员传递给reducer然后传递给组件时，prop第一次为空，然后包含后续渲染的数据。有没有人知道如何防止反应呈现，直到员工道具包含数据？

--------更新

所以我添加了isloading到reducer初始状态并试图将它发送到组件但我收到一个非常可怕的错误

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

有没有人知道如何防止员工反应呈现道具包含数据？

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

ReactRedux数组prop空

2 个答案: