React-select для вывода искаженного массива в приложении React.js Redux Firebase

Question

У меня есть приложение React Redux, которое использует пакет npmact-select с множественным выбором.Моя проблема в том, что он создает искаженный массив, который я не могу перебрать.

this.state.typeOfFruit = [
   0: {label: "label 1", value: "apple"},
   1: {label: "label 2", value: "orange"},
   2: {label: "label 3", value: "banana"} 
]

Я хочу иметь возможность перебирать его с помощью базовой команды прямо сейчас, чтобы начать собирать нужную информацию.

typeOfFruit.map((fruit) => console.log(fruit.value))

Я пытался выяснить, как получить доступ к искаженному массиву или изменить массив на что-то, к чему я мог получить доступ, но подумал, что мой вопрос должен измениться на то, как использовать эту технологию для создания хорошего массива.

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

class FruitOrderForm extends Component {
   constructor(props) {
     super(props)
     this.state = {
       typeOfFuit: [],
     }
   }

const fruitOptions = [
   { value: 'apple', label: 'label 1' },
   { value: 'orange', label: 'label 2' },
   { value: 'banana', label: 'label 3' },
]

handleMultiSelectChange = (typeOfFruit) => {
   this.setState({ typeOfFruit });
}

onSubmit = (e) => {
   e.preventDefault();
   this.props.updateProfile(this.state)
   document.getElementById("fruitOrderForm").reset();
}

render() {
   this.state.typeOfFruit.map((fruit) => console.log(fruit.value))
   return (
      <div>
        <form id='fruitOrderForm' onSubmit={this.onSubmit}>
          < Select
            id='typeOfFruit'
            value={this.state.typeOfFruit}
            onChange={this.handleMultiSelectChange}
            options={fruitOptions }
            isMulti='true'
            isSearchable='true'
          />
          <button>Update</button>
        </form>
      </div>
   )
}
}

const mapStateToProps = (state, ownProps) => {
const profile = state.firebase.profile

return{
   profile: profile,
   auth: state.firebase.auth
} 
}

const mapDispatchToProps = (dispatch) => {
    return {
       updateProfile: (users) => dispatch(updateProfile(users)),
    }
}

export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect([{ collection: 'users'}]))(
FruitOrderForm)

Затем он переходит в магазин избыточного действия

export const updateProfile = (users) => {
   return (dispatch, getState, { getFirebase, getFirestore }) => {
      const firestore = getFirestore();
      const profile = getState().firebase.profile
      const userID = getState().firebase.auth.uid;
      firestore.collection('users').doc(userID).update({
         ...profile,
         typeOfConsulting: users.typeOfConsulting
      }).then(() => {
         dispatch({ type: 'UPDATED_PROFILE', profile });
         console.log('update successful')
      }).catch((err) => {
         dispatch({ type: 'UPDATE_PROFILE_ERROR', err });
         console.log('There was an error', err)
      })
   }
}

Затем через редуктор

const businessProfileReducter = (state = initState, action) => {
   switch (action.type) {
      case 'CREATE_BUSINESS_PROFILE': 
         console.log('created business profile', action.businessProfile)
         return state;
      case 'CREATE_BUSINES_PROFILE_ERROR': 
         console.log('create business profile error', action.err);
         return state;
     default:
        return state;
   }
}

export default businessProfileReducter;

Тогда корневой редуктор

const rootReducer = combineReducers({
   auth: authReducer,
   businessProfile: businessProfileReducer,
   firestore: firestoreReducer,
   firebase: firebaseReducer
})

export default rootReducer

То, что я хочу получить с помощью этого, было бы хорошим массивом, который я мог бы перебрать.

this.state.typeOfFruit = [
   {label: "label 1", value: "apple"}
   {label: "label 2", value: "orange"}
   {label: "label 3", value: "banana"} 
]

Answer 1

Хорошо, @ разбитый картофель. Я понял это на основе того, о чем мы говорили вчера вечером. Вместо того чтобы делать Object.values ​​там, где мы изначально это делали, я переместил его в функцию onSubmit. Я понял, что могу вытащить отдельные значения, прежде чем они будут отправлены в Firebase. Я добавил новый массив в this.state, а затем выполняю несколько операций в функции onSubmit, чтобы переместить его в правильный массив this.state.typeOfConsulting. Смотрите код ниже. Это не совсем красиво, но это работает!

class FruitOrderForm extends Component {
   constructor(props) {
     super(props)
     this.state = {
       typeOfFuit: [],
       interimTypeOfFruit: [],     
     }
   }

const fruitOptions = [
   { value: 'apple', label: 'label 1' },
   { value: 'orange', label: 'label 2' },
   { value: 'banana', label: 'label 3' },
]

handleMultiSelectChange = (typeOfFruit) => {
   this.setState({ typeOfFruit });
}

onSubmit = (e) => {
   e.preventDefault();
    // I'm setting typeOfFruit to an empty array because otherwise it continues to 
    // push the same values to the array that are already there.
    this.setState({
        typeOfFruit: []
    })
    // Then I'm pushing just the values from this.state.interimTypeOfFruit to the
    // proper this.state.typeOfFruit array that I can access like a regular array
    Object.values(this.state.interimTypeOfFruit).map((fruitType) => {
        this.state.typeOfFruit.push(fruitType.value)
    })
   this.props.updateProfile(this.state)
   document.getElementById("fruitOrderForm").reset();
}

render() {
   this.state.typeOfFruit.map((fruit) => console.log(fruit.value))
   return (
      <div>
        <form id='fruitOrderForm' onSubmit={this.onSubmit}>
          < Select
            id='typeOfFruit'
            value={this.state.typeOfFruit}
            onChange={this.handleMultiSelectChange}
            options={fruitOptions }
            isMulti='true'
            isSearchable='true'
          />
          <button>Update</button>
        </form>
      </div>
   )
}
}

const mapStateToProps = (state, ownProps) => {
const profile = state.firebase.profile

return{
   profile: profile,
   auth: state.firebase.auth
} 
}

const mapDispatchToProps = (dispatch) => {
    return {
       updateProfile: (users) => dispatch(updateProfile(users)),
    }
}

export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect([{ collection: 'users'}]))(
FruitOrderForm)

Я не могу поднять ваш ответ, потому что я еще не набрал 15 баллов ... Хотя я пометил его как правильный ответ. Спасибо за вашу помощь!

Answer 2

Похоже, вы на самом деле получаете объект, а не массив (факт, что ключи показаны).Если это так, вы можете повторить его с помощью:

Object.keys(typeOfFruit).map((fruitId) => console.log(typeOfFruit[fruitId].value))

или

Object.values(typeOfFruit).map((fruit) => console.log(fruit.value))