React Native数组添加元素后页面未渲染问题求助

问题核心在于你直接修改了state数组的引用：

• 使用dummyarray.push()直接修改原数组，React无法检测到这种变化，因此不会触发组件重新渲染。
• React要求必须通过state更新函数（这里是setDummyarray）来修改state，并且要提供新的数组引用，而不是修改原数组。

修复步骤 #

1. 替换数组修改方式：使用展开运算符（...）或concat创建新数组，再通过setDummyarray更新state
2. 移除不必要的async：addiem函数没有异步操作，不需要标记为async
3. 优化key值：用元素的id作为map的key，比索引更可靠
4. 修正按钮文字：按钮文字“Clear all orders”和功能不符，改为“Add Item”更合理

修复后的完整代码 #

import React,{useState} from 'react';
import { StyleSheet, Text, View,TouchableOpacity,ScrollView} from 'react-native';

export default function App({navigation}) {
   const [dummyarray, setDummyarray] = useState([{id:1, product:"pendrive"}]);

function addiem(){
  // 创建新数组并更新state，触发组件渲染
  setDummyarray([...dummyarray, {id:2, product:"mobile phone"}]);
}

   return (
       <View style={styles.container}>
         <ScrollView>    
           {dummyarray.map((item) => (
             <View key={item.id} style={styles.itemContainer}>
               <Text>{item.product}</Text>                
             </View>
           ))}

           <TouchableOpacity onPress={addiem} style={styles.button}>
             <Text>Add Item</Text>
           </TouchableOpacity>
         </ScrollView>
       </View>
   );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  itemContainer: {
    backgroundColor: 'white',
    padding: 10,
    marginVertical: 5,
    marginHorizontal: 10,
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  button: {
    backgroundColor: '#e0e0e0',
    padding: 15,
    margin: 10,
    borderRadius: 5,
    alignItems: 'center',
  }
});

补充说明 #

• 展开运算符[...dummyarray, newItem]会复制原数组的所有元素，再添加新元素，生成一个全新的数组引用
• 也可以用dummyarray.concat({id:2, product:"mobile phone"})，concat方法同样会返回新数组，不会修改原数组
• 始终通过state更新函数修改state，这是React组件更新的核心规则

内容的提问来源于stack exchange，提问作者Vikram Singh