如何预处理 React Native 组件的提取 redux 数据？

Question

我有一个用 expo 构建的反应原生应用程序。这是一个预算应用程序。我正在尝试显示给定月份支出类型的饼图。我的逻辑如下：通过调度（）从redux中检索支出Effect将支出与其他字段一起推送到将提供给饼图的数组。提供给饼图，并将该数组作为道具。我正在经历的事情：在 use 中通过 dispatch（） 从 redux 中检索支出Effect尝试将其他字段的支出推送到数据数组。尝试将此数组提供给饼图。饼图呈现完全空白。（此时记录数组显示它也是空的）（在 useEffect 钩子中记录数组显示非空数组）我的代码：import React, {useEffect} from 'react';import { StyleSheet, StatusBar, View, Text, AsyncStorage, Button, Dimensions } from 'react-native';import {useSelector,useDispatch} from 'react-redux';import {getExp, clearExp} from './../actions/expActions.js';import _uniqueId from 'lodash/uniqueId';import { getRecurrExp } from '../actions/recurrExpActions.js';import { PieChart } from "react-native-chart-kit";export default function Report() {  const expR = useSelector(state => state.expR)  const recurrExpR = useSelector(state => state.recurrExpR)  const dispatch = useDispatch();  const screenWidth = Dimensions.get("window").width  const chartConfig ={    backgroundColor: "#e26a00",    backgroundGradientFrom: "#fb8c00",    backgroundGradientTo: "#ffa726",    decimalPlaces: 2, // optional, defaults to 2dp    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,    style: {      borderRadius: 16    },    propsForDots: {      r: "6",      strokeWidth: "2",      stroke: "#ffa726"    }  }  var piePieces = [];  const getAllExps = () => {    dispatch(getExp())    dispatch(getRecurrExp())  }  useEffect(() => {    getAllExps()    expR.catCounts.map(cat => {        piePieces.push({value: cat.count / expR.cat * 100, name: cat.category, color: cat.category==="cat1" ? '#E38627' : '#C13C37' })    })    console.log(piePieces) //Log's a filled array  },[])  // Deprecated, saving for   const clearAsyncStorage = async() => {      AsyncStorage.clear()  }  const clearExpTest = () => {    dispatch(clearExp())  }

Answer 1

我的猜测是，这与重新渲染组件有关。由于您正在推动而不是重新分配，因此它不会重新呈现。piePieces

我还建议使用useSate for piePieces来规避这个确切的问题。

将使用状态添加到导入

import React, {useEffect, useState} from 'react';

组件顶部定义饼图

const [piePieces, setPiePiecse] = useState([]);

您可以使用 map 返回一个包含返回值的新数组forEachmap

expR.catCounts.forEach(cat => {
  setPiePieces([...piePieces, {value: cat.count / expR.cat * 100, name: cat.category, color: cat.category==="cat1" ? '#E38627' : '#C13C37' }])
})

Answer 2

对于将来的任何人，Bloatlords的答案都是正确的，但会导致在每个循环中设置状态的异步问题。

为了解决这个问题，设置状态的正确方法是：

setPiePieces(piePieces => [...piePieces, {value: ((cat.count / expR.cat) * 100),

                                          name: cat.category,

                                          color: (cat.category.localeCompare("cat1") ? "green" : "yellow"),

                                          legendFontColor: "black", legendFontSize: 15}

])