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