我不知道错误的原因:

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

javascript,Array.prototype.map()。索引未定义-LMLPHP

最佳答案

几乎不会出错,无论何时使用箭头函数,都应该从同一行的函数体开始。将它包装在 () 中也是一个好习惯,而且你的检查也是不必要的,因为如果没有元素存在,它不会映射,但是你必须检查 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>
    )
  )}

关于javascript,Array.prototype.map()。索引未定义,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43992286/

10-11 12:57