reactjs - 每个子列表应该有一个唯一的“关键”道具警告？

Question

当我制作滚动视图列表时，我不断收到警告。每个子列表应该有一个唯一的“关键”道具警告？我试图制作一个可附加列表，当您单击按钮时可以添加项目。如果有人可以提供帮助，那就太好了！

export default function Home ()  {
 const [people,setPeople] = useState([

  {name:'First', key:'1'},
  {name:'Second', key:'2'},
  {name:'Third', key:'3'},
  {name:'Fourth', key:'4'},
  {name:'Fifth', key:'5'},
 ])
 
  return (
    
    <View style={styles.container}>
      
    <ScrollView>
        <View style={styles.Square1}>
        

        <View style={{backgroundColor:'#171651', height:340, width:400, borderRadius:10,}}>
          <Text style={{color:"white", fontWeight:'bold', marginStart:10, fontSize:30, marginTop:10}}>
            Investing
            </Text>
            <Text style={{color:"white", fontWeight:'bold', marginStart:10, fontSize:30,}}>
                $0.00
            </Text>
        </View>
        </View>
        
        <View style={{marginTop:50}}>
          <Text style={{color:'white', fontSize:20, marginStart:10}}>
            Favorites
          </Text>
        </View>

      <ScrollView>
        {people.map(item=> (       
          <TouchableOpacity>
          <View key={item.key}>
            <Text style={styles.item}>{item.name}</Text>
          </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
        </ScrollView>
      </View>
 
    );
  } ``

标签： reactjsreact-nativeexpo

Answer 1

将你的 key 道具移到TouchableOpacity. React 期望 key prop 位于最顶层的元素中。

        {people.map(item=> (       
          <TouchableOpacity key={item.key}>
              <View>
                  <Text style={styles.item}>{item.name}</Text>
              </View>
          </TouchableOpacity>
        ))}