Блог

У меня есть массив,

 const array = [
{"row":"0", "column": "0"}, 
{"row":"0", "column": "1"},
{"row":"1", "column": "0"},
{"row":"1", "column": "1"}, 
{"row":"2", "column": "0"}, 
{"row":"2", "column": "1"}
]
  

Примечание: строки и столбцы не являются предопределенными, они могут меняться каждый раз.

Из массива мне нужно создать 2D-массив и сохранить его в состоянии в react native, чтобы я мог использовать состояние для отображения требований с использованием сохраненного массива,

У меня две проблемы: одна преобразует 1d в 2d, а другая сохраняет его в состояние an для дальнейшего использования,

Моя функция преобразования 1d в 2d:

 for (let i = 0; i < this.state.array.length; i  ) {
       let row = this.state.array[i].row;
            if (newSeats[row] === undefined) newSeats[row] = [];
               newSeats[row].push(this.state.array[i]);
       }

for (let i = 0; i < this.state.array.length; i  ) {
       let column = this.state.array[i].column;
             if (newSeatss[column] === undefined) newSeatss[column] = [];
               newSeatss[column].push(this.state.array[i]);
       }
  

Это дает два массива, так что это эффективный способ преобразовать 1d в 2d? И я не могу использовать setstate здесь, поскольку он выдает ошибку, указывающую максимальную глубину, достигнутую для setstate, так как сохранить результат в состоянии? и если есть какой-либо другой лучший способ сделать преобразование, пожалуйста, предложите!

И весь мой компонент :

 import React, { Component} from 'react';
import { View, Text, StyleSheet, ScrollView, Dimensions, TouchableOpacity, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { fetchSeatLayout } from '../../actions/HomeActions';
import Loader from '../components/loader';
import { Feather } from '@expo/vector-icons';
import { Button } from 'react-native-elements';

const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;

class SeatLayout extends Component {

    state = { isLoading: true, selectedSeatLayouts: [], seatArray: [] }

    componentDidMount() {
        this.props.fetchSeatLayout(this.props.selectedBus.id, (data) => {
            this.setState({ isLoading : false, selectedSeatLayouts: data.seats })
        }) 
       
    }
   

    seats = () => {

        let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {
            if (!r[row]) r[row] = [];
            r[row][column] = name;
            return r;
        }, []);
          console.log(arr2d);
  
    }


    render() {
        
        return(
            <View style={styles.container}>
                <Loader
                    loading={this.state.isLoading} />

                <View style={{ flex: 1 }}>
                    <View style={styles.headerContainer}>
                        <View style={{ paddingTop: 50, paddingHorizontal: 20, alignItems: 'center' }}>
                            <Text>30 Sep, 2020</Text>
                        </View>
                    </View>
                    
                    <View style={styles.bodyContainer}>
                           {this.seats()}    
                    </View>
                </View>
            
            

            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    headerContainer:{
        height: h * 0.23,
        backgroundColor: '#f0eff4',
    },
    bodyContainer:{
        justifyContent: 'center'
        
    },
});


const mapStateToProps = state => {
    return {
        selectedBus: state.home.userSelectedBus,
    }
}

export default connect(mapStateToProps, {fetchSeatLayout})(SeatLayout);
  

Обновите свой componentDidMount до этого, чтобы он сохранял 2D-массив в состоянии

 componentDidMount() {
  this.props.fetchSeatLayout(this.props.selectedBus.id, (data) => {
    this.setState({ isLoading : false, selectedSeatLayouts: data.seats},()=>{
      this.setState({seatArray:this.seats()})
    })
  }) 
}
  

Прямо сейчас seats функция ничего не возвращает, пожалуйста, обновите ее, чтобы вернуть что-нибудь

 seats = () => {
  let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {
      if (!r[row]) r[row] = [];
      r[row][column] = name;
      return r;
  }, []);
    console.log(arr2d);
  return arr2d;
}
  

На данный момент у вас есть состояние с параметром seatArray, теперь вы можете использовать его в соответствии с вашими требованиями.

Обновите этот блок кода, чтобы показать что-то вместо вызова 2darr,

 <View style={styles.bodyContainer}>
  {this.seats()} //remove this to show some visual component   
</View>