Question

我想遍历这个对象数组，但是在尝试映射它时总是出错。它是使用npm包“ react-select”中的多次选择生成的。寻找我在React中使用的JavaScript答案。

我所尝试的示例是我现在仅尝试将值添加到console.log。运行它时，出现TypeError：无法读取未定义的属性“ map”。

我相信我记得过去曾经遇到过在数组内部的对象前面放置数字的问题，但是我无法弄清楚这种数组的类型是为了诊断问题。< / p>

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))

我的预期结果是[苹果，橙子，香蕉]。

****编辑****

我包括了用于创建格式错误的数组的react-select多选表单的代码。因此，提交后的信息将通过我的redux存储进入Firebase Firestore。最终结果是上面的格式不正确的数组。这是更大的代码基础，因此我尝试发布应应用于该特定代码路径的所有内容。

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() {
   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)

我的Redux存储操作

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

我认为这应该涵盖所有内容。如果有人看到任何明显的漏洞，请告诉我。

Answer 1

看起来像数组定义方式中的某些语法错误，数组不应该包含键值对。请检查下面的代码段。希望对您有所帮助。

typeOfFruit = [
   {label: "label 1", value: "apple"},
   {label: "label 2", value: "orange"},
   {label: "label 3", value: "banana"} 
]

typeOfFruit.map((fruit) => console.log(fruit.value))

Answer 2

typeOfFruit = [
   {label: "label 1", value: "apple"},
   {label: "label 2", value: "orange"},
   {label: "label 3", value: "banana"} 
]

var newArray = typeOfFruit.map(x => {
  return x.value
});

console.log(newArray);

Answer 3

您的数组格式不正确，是的，但是有两种方法可以修复它。

对象数组

一个更干净的是：

const typeOfFruit = [
   {label: "label 1", value: "apple"},
   {label: "label 2", value: "orange"},
   {label: "label 3", value: "banana"}
]

typeOfFruit.map((fruit) => console.log(fruit.value))

具有索引键值对的数组

但是，如果您需要0: { ... }格式，则可以使用Object.values（如果为not supporting IE）并获取每个格式的第一个值，如下所示：

const typeOfFruit = [
    {0: { label: "label 1", value: "apple"} },
    {1: {label: "label 2", value: "orange"} },
    {2: {label: "label 3", value: "banana"} }
]

typeOfFruit.map((fruit) => console.log(Object.values(fruit)[0].value) )

如何从此嵌套数组中获取值

3 个答案:

对象数组

具有索引键值对的数组