React Native列表子元素key prop报错：已设置仍无效求解决

1. key的位置错误：报错提示的是列表子元素缺少唯一key，但你误将key加在了内部的TextInput上。实际上，你在Inputs.map中返回的每个<View>是列表的直接子元素，React要求列表的每一项直接子元素必须设置唯一key。
2. key属性不可见是正常现象：React元素的key是内部优化属性，不会暴露在组件的props中，所以你通过console.log打印TextInput时看不到key，这并不代表key没设置成功。

方案1：快速修复key问题 #

直接给map返回的外层<View>添加key即可：

{Inputs.map((row, index) => {
  return (
    <View key={index}> {/* 给列表子元素添加key */}
      <Text>{index+1}.</Text>
      {row}
    </View>
  );
})}

方案2：重构代码（推荐，符合React状态管理最佳实践） #

你当前用var声明的Inputs和Words会在组件每次重渲染时重置，导致输入内容丢失。改用useState维护状态，同时直接在渲染阶段生成输入框：

import { useState } from 'react';
import styles from '../styles/styles';
import { Text, TextInput, View, Pressable, ScrollView } from 'react-native';

export default function WordInput({ navigation }) {
  // 用useState维护12个输入项的状态，初始化为空字符串数组
  const [words, setWords] = useState(Array(12).fill(''));

  const updateWord = (value, index) => {
    // 不可直接修改原数组，创建新数组更新状态
    const newWords = [...words];
    newWords[index] = value;
    setWords(newWords);
  };

  const submitWords = () => {
    console.log("提交的单词：", words);
  };

  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.header}>
          <Text style={{ textAlign: 'center', fontSize: 30 }}>Enter Words:</Text>
          {/* 直接循环生成输入框，给每个列表项加key */}
          {words.map((word, index) => (
            <View key={index}>
              <Text>{index + 1}.</Text>
              <TextInput
                style={styles.input}
                placeholder="word"
                value={word} // 绑定状态，实现受控组件
                onChangeText={(value) => updateWord(value, index)}
              />
            </View>
          ))}
          <Pressable style={styles.button} onPress={submitWords}>
            <Text style={styles.buttonText}>Submit</Text>
          </Pressable>
        </View>
      </ScrollView>
    </View>
  );
}

补充说明 #

• 用index作为key在当前场景是可行的，只要列表不会出现动态排序、增删元素的需求；如果之后有这类需求，建议使用唯一ID（如UUID）作为key。
• 重构后的代码将TextInput改为受控组件，绑定value属性，确保输入框内容与状态同步，避免数据丢失。

内容的提问来源于stack exchange，提问作者Ilir Iljazi