javascript，Array.prototype.map()。索引未定义

Question

不知道错误原因:

 ｛ (questionList.length > 0) && questionList.map((item,index)
          =>
          <View key={index} style={styles.oneMonthV}>
            <Text
                style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
            <View style={styles.VTags}>
              {item.optionsList.map((item1, index1) =>
                  <TouchableOpacity key={index1}
                                    onPress={this._onPressButton.bind(this, index1)}>
                    <View>
                      { (item1.selected) ? (<TagCell modeColor='red'
                                                     content={item1.content}></TagCell>) : (
                          <TagCell
                              content={item1.content}></TagCell>) }
                    </View>
                  </TouchableOpacity>
              ) }
            </View>
          </View>
          )｝

错误显示在

<View key={index} style={styles.oneMonthV}> .为什么索引未定义。

我在 chrome 中键入下面的代码控制台是正确的。

['xxx','xx','xxx','www'].map((item,index) => {        console.log(`index==${index}`);  console.log(`item==${item}`);
    return (
        item + 'hahaha' )});

结果:

> index==0  
  item==xxx  
  index==1  
  item==xx  
  index==2  
  item==xxx  
  index==3  
  item==www  
(4) ["xxxhahaha", "xxhahaha", "xxxhahaha", "wwwhahaha"]

我认为我的代码是正确的。 谁知道这个错误的原因？

---

因为这个错误太难了。 我添加了这个问题的更多代码。

render() {
    const {questionList} = this.props;
    return (
        <ScrollView style={styles.container}>
          ｛ (questionList.length > 0) && questionList.map((item,index) => (
          <View key={index} style={styles.oneMonthV}>
            <Text
                style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
            <View style={styles.VTags}>
              {item.optionsList.map((item1, index1) => (
                      <TouchableOpacity key={index1}
                                        onPress={this._onPressButton.bind(this, index1)}>
                        <View>
                          { (item1.selected) ? (<TagCell modeColor='red'
                                                         content={item1.content}></TagCell>) : (
                              <TagCell
                                  content={item1.content}></TagCell>) }
                        </View>
                      </TouchableOpacity>
                  )
              ) }
            </View>
          </View>
          )
          )｝
        </ScrollView>
    );
  }

Answer 1

很少会出错，无论何时使用箭头函数，都应该从同一行的函数体开始。将它包装在 () 中也是一个好习惯，而且您的检查是不必要的，因为如果没有元素存在，它就不会映射，但是您必须检查 undefined。同时将 ｛｝ 更改为 {}。

{questionList && questionList.map((item,index) => (
      <View key={index} style={styles.oneMonthV}>
        <Text
            style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
        <View style={styles.VTags}>
          {item.optionsList.map((item1, index1) => (
              <TouchableOpacity key={index1}
                                onPress={this._onPressButton.bind(this, index1)}>
                <View>
                  { (item1.selected) ? (<TagCell modeColor='red'
                                                 content={item1.content}></TagCell>) : (
                      <TagCell
                          content={item1.content}></TagCell>) }
                </View>
              </TouchableOpacity>
              )
          ) }
        </View>
      </View>
    )
  )}