React Native中数组数据无法在视图中渲染的技术问询

问题出在map回调函数的返回逻辑上：你用{}包裹了回调代码块，但没有显式返回要渲染的TouchableOpacity组件，导致map遍历后没有生成任何可渲染的JSX元素，所以视图中看不到内容。

修复方案有两种： #

方案1：添加显式return语句

const optionView = () => {
    return (
      <View style={styles.OptionView}>
        {allQuestions[currentQuestionIndex]?.options.map((option, index) => {
          // 显式返回JSX元素
          return (
            <TouchableOpacity
              key={index}
              onPress={() => {}}
              style={styles.ButtonView}>
              <View style={{}}>
                <Text style={styles.optionText}>{option}</Text>
              </View>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };

方案2：使用箭头函数隐式返回

把回调的{}换成()，箭头函数会自动返回括号内的JSX元素：

const optionView = () => {
    return (
      <View style={styles.OptionView}>
        {allQuestions[currentQuestionIndex]?.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => {}}
            style={styles.ButtonView}>
            <View style={{}}>
              <Text style={styles.optionText}>{option}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    );
  };

额外建议 #

尽量不要用数组索引index作为key，如果后续选项列表有排序、增删操作，可能引发组件渲染异常。如果每个选项有唯一标识（比如id），建议用该标识作为key。

内容的提问来源于stack exchange，提问作者Atul Singour