Не могу взять информацию из массива ES6

Question

Я не могу отобразить массив. Сначала я выдвинул некоторые объекты в массиве

const resultat = [];
resultat.push(object);

после этого, когда я утешил массив, он правильно содержит объекты

это результат работы консоли массива

[]
0: { user: {…}, name: "Test User 1", private: null, sharingspace: {…}}
1: { user: {…}, name: "FoodTest  ", private: null, sharingspace: {…}}
length: 2
__proto__: Array(0)

и когда я делал карту, она не брала никакой информации, я пытался утешить результат [0], но он возвратил неопределенное.

это похоже на проблему этой статьи Переменная Javascript представляет собой массив объектов, но не может получить доступ к элементам

Я добавил информацию, зацикливаясь на axios и заполняя объект

//this is the part where I stored the data 
import { SET_SHARINGSPACES, SHARING_LOADING, CLEAR_SHARING } from "./types";
import axios from "axios";

export const setSharingSpaces = (org, user) => dispatch => {
  const orgName = org.value.substr(1);
  const groups = user.group.filter(group => group.includes(orgName));
  const resultat = [];
  dispatch(SharingLoading());
  groups.forEach(function(group, index) {
    let idparts = group.split("#");
    let aBox = "a" + orgName;
    axios
      .get("api/" + aBox + "/group/" + aBox + ":" + idparts[1])
      .then(res => resultat.push(res.data[0]));
  });
  dispatch(setSharing(resultat));
};
export const setSharing = res => {
  return {
    type: SET_SHARINGSPACES,
    payload: res
  };
};
// Graph loading
export const SharingLoading = () => {
  return {
    type: SHARING_LOADING
  };
};
// Graph loading
export const clearSharing = () => {
  return {
    type: CLEAR_SHARING
  };
};

Здесь я заряжаю компонент при загрузке данных

const { groups, loading } = this.props.sharingSpace;

    let SharingContent;
    if (groups == null || loading) {
      SharingContent = <h4>0 Spaces</h4>;
    } else {
      SharingContent = <SharingList groups={groups} />;
    }

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

class SharingList extends Component {
  render() {
    const { classes } = this.props;
    const { groups } = this.props.sharingSpace;
    console.log("group", groups);
    const names = groups.map(group => group.sharingspace.name);
    console.log(names);

    return (
      <List component="div" disablePadding>
        <ListItem button className={classes.nested}>
          <ListItemText inset primary="Space 1" />
        </ListItem>
      </List>
    );
  }
}
SharingList.propTypes = {
  classes: PropTypes.object.isRequired,
  sharingSpace: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth,
  sharingSpace: state.sharingSpace
});
export default connect(
  mapStateToProps,
  {}
)(withStyles(styles)(SharingList));

Answer 1

Трудно ответить на основании предоставленной информации.

Но так как вы упоминаете axios и что он "показывает" с console.log, это может быть эффект гонки.

Это означает, что ваших данных еще нет, таким образом, пустой массив [], когда вы его console.log, и результаты, когда вы его расширяете - Chrome делает некоторую «магию», чтобы заполнить массив новейшими данными. доступно, даже если во время console.log оно было пустым.

Так что, если вы непосредственно console.log первый элемент вашего массива, он будет пытаться отобразить первый элемент, которого еще нет, таким образом, ничего не показывая.

Это также обозначается этим маленьким значком «i» (вы можете навести его в консоли):