如何预处理 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 返回一个包含返回值的新数组forEachmapexpR.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}])