Javascript 视图在数组中添加新json对象时不刷新。自然反应

该程序编译得非常完美，但当我扫描产品时，它不会在视图中刷新。 我已经在所有产品中安装了mysql xampp。当查询条形码时。我获取产品的详细信息作为响应，并在数组中添加带有parse对象的json响应

单击TouchableOpacity（稍后扫描产品）时，视图将刷新

import React，{Component，useState，useffect}来自'React'；
从“react native”导入{维度、图像、视图、文本、异步存储、TouchableOpacity、网格、样式表、ScrollView、ToastAndroid}；
从“react native elements”导入{SearchBar、Card、Icon}；
从“expo条形码扫描仪”导入{BarCodeScanner}；
//从“./NumberList”导入{NumberList}；
const{width，height}=Dimensions.get（'window'）；
常量urlApi=”http://192.168.1.24/rst/api/getProduct.php";
常量数=[1,2,3,4,5,6]；
类SaleScreen扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
扫描：错误，
结果：空，
扫描结果：错误，
是的，
setHasPermission:对，
产品：[]，
jwt:null，
};
//this.componentDidMount（）；
}
异步组件didmount（）{
让_jwt=await AsyncStorage.getItem（'userToken'）；
这是我的国家({
jwt:_jwt
});
}
_searchProduct=async（数据）=>{
试一试{
let response=wait fetch（urlApi{
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
授权：“持票人”+this.state.jwt
},
正文：JSON.stringify({
科迪巴拉：数据
})
});
让responseJson=wait response.json（）；
//console.log（responseJson）；
if（responseJson.codibarra==null）{
//控制台日志（“Retrona falso”）；
返回false；
}
其他的
{
if（this.state.productos！=null）
{
this.state.productos.push（responseJson[0]）；
//this.setState（{productos:this.state.productos.push（responseJson[0]））
//console.log（this.state.productos）；
}
其他的
{
this.state.productos.push（responseJson[0]）；
}
}
}捕获（错误）{
控制台错误（error）；
}
};
render（）{
const{scan，ScanResult，result，hasPermission，setHasPermission，productos}=this.state；
常量activeBarcode=（）=>{
这是我的国家({
扫描：对
})
}
const handlebarcodescanted=async（{type，data}）=>{
//console.log（'扫描数据'+数据）；
this.setState（{result:data，scan:false，ScanResult:false}）；
本产品（数据）；
};
if（hasPermission==null）{
返回请求相机许可；
}
if（hasPermission==false）{
不允许进入摄像机；
}
返回(
{productos.length==0&&
}
{productos.length>0&&
{“总计：}
{result.precioventa}
}
{扫描&&
}
);
}
}
函数编号列表（道具）{
console.log（“NUMBERLIST”）
控制台日志（道具）；
const产品=道具产品；
const listItems=products.map（（产品）=>
//正确！应在数组内指定密钥。
);
返回(
{listItems}
);
}
功能列表项（道具）{
//正确！无需在此处指定密钥：
常数u=道具值；
返回(
{u&&
{u.descripion}
{u.precioventa}
}
);
}
const styles=StyleSheet.create({
容器：{
背景颜色：“黑色”
},
集装箱家庭：{
背景颜色：“白色”，
高度:高度,，
宽度：宽度，
flexDirection:“列”
},
信用卡销售：{
背景颜色：“白色”，
弹性：1，
填充：15，
边框宽度：1，
边界半径：10，
边框颜色：'#ddd'，
边界宽度：7，
//阴影颜色：“#000”，
阴影颜色：“191919”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0.8，
阴影半径：2，
立面图：1，
边缘左：5，
marginRight:5，
玛金托普：20，
},
卡片内容：{
flexDirection:“行反转”，
尺码：50
},
按钮：{
flexDirection:'列'，
玛金托普：20，
marginLeft:20，
marginRight:20，
},
contentActionFast：{
背景颜色：“白色”，
flexDirection:'行'，
对齐项目：'中心'，
justifyContent:'之间的空间'，
弹性：1
}
});
导出默认屏幕您的组件没有重新呈现，因为在
\u searchProduct
中您正在执行
此.state.productos.push（responseJson[0]）
在应该使用
setState（）
时更新状态对象。现在直接修改状态不会触发重新渲染，并可能导致其他问题，这就是为什么您永远不应该这样做，而是始终使用
setState（）
（或挂钩）来更新状态。这里的文档中提到了这一点：

相反，请尝试：

this.setState((prevState) => ({
    productos: [...prevState.productos, responseJson[0]]
});