我在这个问题上堆积了很长时间，需要一些帮助来解决它。
我正在构建一种销售应用程序，并尝试在一个页面中设置所有内容，以便用户可以获得他的成就与他的目标
在这个屏幕中，我试图设置一张桌子。除了代码假设设置要运行的表格内容外，一切正常。尽管我尽了最大努力让它在用户通过屏幕后重新渲染，但它一直没有重新渲染，我必须手动重新渲染
如果完成屏幕不断重新渲染导致应用程序崩溃。我确定这是我的代码中的一个问题
任何人都可以解决这个问题，我将不胜感激
import React, { useCallback, useEffect, useState } from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
ScrollView,
RefreshControl
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import Colors from '../../constants/Colors';
import * as salesActions from '../../store/sales/actions/sales';
import Spinner from '../../components/Spinner';
import * as targetActions from '../../store/forecast/forecast';
import { Table, Row } from 'react-native-table-component';
import productsData from '../../data/ProductsData';
import { thousands } from '../../components/Thousands';
const {width, height} = Dimensions.get('window');
const widthArrayHeader = [width / 3.5, width / 3.6, width / 3.6, width / 8.2];
const headerNamesWidth = [width / 3.5, width / 7.2, width / 7.2, width / 7.2 , width /7.2, width / 8.2];
const MonthlySalesScreen = props => {
useEffect(() => {
dispatch(targetActions.fetchTarget());
}, [dispatch])
const month = props.navigation.getParam('month');
const {
totalYearSales,
monthTarget,
monthValue,
} = useSelector(state => state.sales);
const [isLoading, setIsLoading] = useState(false);
const [salesValues, setSalesValues ] = useState([]);
const [monthSales, setMonthSales ] = useState([]);
const [tableContent, setTableContent ] = useState([]);
const [totalSales, setTotalSales ] = useState(null);
const [currentMonthSales, setCurrentMonthSales ] = useState([]);
const dispatch = useDispatch();
useEffect(() => {
setIsLoading(true);
dispatch(salesActions.fetchSales(month))
setIsLoading(false);
}, [dispatch])
const getSalesData = useCallback(async() => {
setIsLoading(true);
const monthlySales = await totalYearSales.filter(x => {
return x.monthName === month
})
setCurrentMonthSales(monthlySales);
setIsLoading(false);
}, [totalYearSales])
useEffect(() => {
getSalesData()
}, [getSalesData])
const getMonthSales = useCallback(async() => {
const sum = await currentMonthSales.reduce((sum, current) => {
let sumItem = sum.find(x => x.itemName === current.itemName);
if (!sumItem)
sum.push(current)
else {
sumItem.itemName = sumItem.itemName;
sumItem.quantity = parseInt(sumItem.quantity) + parseInt(current.quantity)
}
return sum
}, []);
setMonthSales(sum)
} , [currentMonthSales])
useEffect(() => {
getMonthSales();
}, [getMonthSales])
useEffect(() => {
dispatch(salesActions.getTargetData(month));
}, [dispatch])
const getSalesValueHandler = useCallback(async () => {
let salesValue = [];
let totalSales = [];
await monthSales.map((sal) => {
productsData.map((pro) => {
if (sal.itemName === pro.product) {
salesValue.push({
itemName : sal.itemName,
salesUnits : sal.quantity,
salesValue : parseFloat(sal.quantity) * parseFloat(pro.price)
})
totalSales.push(parseFloat(sal.quantity) * parseFloat(pro.price))
}
})
})
setSalesValues(salesValue);
setTotalSales(totalSales.reduce((a,b) => a + b, 0));
}, [monthSales])
useEffect(() => {
getSalesValueHandler()
}, [getSalesValueHandler])
const getTableData = useCallback(() => {
let tableData = [];
if (salesValues.length > 0) {
salesValues.map((sale) => {
monthTarget.map((target) => {
if (sale.itemName === target.itemName) {
tableData.push([
sale.itemName,
thousands(parseInt(target.targetUnits)),
thousands(parseFloat(target.targetValue).toFixed(2)),
thousands(parseInt(sale.salesUnits)),
thousands(parseFloat(sale.salesValue).toFixed(2)),
`${((parseFloat(sale.salesValue)) / (parseFloat(target.targetValue)) * 100).toFixed(2)}%`
])
}
})
})
var difference = (monthTarget.map(
name => name.itemName
)).filter(x => !(salesValues.map(
sale => sale.itemName
)).includes(x));
const differenceItems = difference.map((str) => {
return {itemName : str}
})
monthTarget.map((data) => {
differenceItems.map((dif) => {
if (data.itemName === dif.itemName) {
tableData.push([
data.itemName,
data.targetUnits,
parseFloat(data.targetValue).toFixed(2),
'0',
'0',
'0.00%'
])
}
})
})
} else if (salesValues.length === 0) {
monthTarget.map((data) => {
tableData.push([
data.itemName,
data.targetUnits,
parseFloat(data.targetValue).toFixed(2),
'0',
'0',
'0.00%'
])
})
}
setTableContent(tableData)
}, [getSalesData, getMonthSales, getSalesValueHandler, monthTarget, salesValues])
useEffect(() => {
getTableData()
}, [salesValues, monthTarget])
const headerData = ['', 'Target' , 'Sales', ''];
const headerNames = ['Item' , 'Units' , 'Value' , 'Units' , 'Value' , 'Ach'];
const lastRow = [
'Total',
thousands(parseFloat(monthValue).toFixed(2)) ,
thousands(parseFloat(totalSales).toFixed(2)),
`${thousands((((parseInt(totalSales) / parseInt(monthValue)).toFixed(2)) * 100).toFixed(0))}%`
]