如何将 array.reduce() 与反应钩子 useState、useEffect 一起使用？答案

【问题标题】：How to use array.reduce() with react hook useState, useEffect?如何将 array.reduce() 与反应钩子 useState、useEffect 一起使用？
【发布时间】：2019-10-07 05:41:27
【问题描述】：

编辑：请在下面找到我的整个组件代码。在 useEffect 上没有刷新“数据”状态......这是什么鬼！！！

我在 useEffect 中从 firebase 获取数据。在 useEffect 中，我使用 useState 将我的数据（它是一个数组）存储在一个状态中。我想在我的 rfc 渲染方法中使用这些数据，但首先需要 reduce() 它。我试图在原始 useEffect （与我获取数据的位置相同）、其他 useEffect 甚至我的渲染方法中减少它。这些都不能真正做到。我的累加器参数在我的 reduce 函数中保持为空。拜托，我真的需要一些帮助。


 import React, { useState, useEffect } from 'react'
import { Grid, Paper, Typography, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
import firebase from './../firebase'

const db = firebase.firestore()

export default function Scores(props) {

    let { match } = props
    let [currentEvent, setcurrentEvent] = useState(null)
    let [records, setRecords] = useState([])
    let [data, setdata] = useState(null)




    useEffect(() => {
        console.log("effet 1")
        db.collection('events').doc(match.params.id)
          .onSnapshot(doc => {

            setcurrentEvent(currentEvent = { ...doc.data(), uid: doc.id })
            setRecords(records = doc.data().records)
          })

      }, [])

      useEffect(() => {
            console.log(records)
          let x = records.reduce((result, record) => {
              console.log(record)
            result[record.user] = result[record.user] || []
            result[record.user].push(record.time.seconds)
            console.log(result)
            return result
        }, [])
          console.log(x)
          setdata(data = x)

      }, [records])






      if (!currentEvent) {
          return (<h1>data loading ...</h1>)
      }

      return (
          <Paper style={{margin: 8, padding: 8}}>
              <Typography variant='h4'>
                {data.length}
              </Typography>

              <Typography>

              </Typography>


              <Table >
                <TableHead>
                    <TableRow>
                        <TableCell>Participant</TableCell>
                        <TableCell align="right">run 1</TableCell>
                        <TableCell align="right">run 2</TableCell>
                        <TableCell align="right">run 3</TableCell>

                    </TableRow>
                </TableHead>
                <TableBody>


                </TableBody>
            </Table>

          </Paper>
      )




}



/*
useEffect(() => {
          console.log("hi")
          console.log(records)
        let data = records.reduce((result, record) => {
            result[record.user] = result[record.user] || []
            result[record.user].push(record.time.seconds)
            console.log('coucou')
            return result
        }, [])
        setRecords(records = 'coucou')
      }, [])

*/

【问题讨论】：

标签： reactjs reduce react-hooks

【解决方案1】：

看起来您正在处理返回函数内的所有内容，useEffect 的工作方式类似于 componentWillUnmount - 如 docs 中所述

尝试在返回函数之前运行您的reduce 逻辑：

useEffect(() => {
    let records = [];
    let x = records.reduce((result, record) => {
      result[record.user] = result[record.user] || []
      result[record.user].push(record.time.seconds)
      return result
  }, [])
  setdata(data = x)
  }, [records])

【讨论】：

嗯...如果你开始'记录'是一个空数组，你希望它怎么做？我认为返回函数与此无关......
我认为我对数组的操作是正确的。问题在于状态不更新。我不知道为什么。我可以将数据设置为一个简单的变量，它工作得很好，但是一旦我使用 reduce()，就会发生一些奇怪的事情......
我认为之后不会调用任何渲染方法。但是 useState 在 useEffect 中被调用，所以 render 应该触发！！！
我们说的是错误的返回函数，你在 useEffect 顶部调用的返回是这样的，所以你的 useEffect 在挂载时什么都不做
你所有的逻辑只在卸载时被调用

【解决方案2】：

setdata(data = x)

这不是您应该使用useState 挂钩的方式。在这一行中，您尝试为状态变量分配一个值，作为状态更新函数的参数。

它应该看起来像这样setdata(x)

More info here ...

检查您的开发工具是否有错误（TypeError：赋值给常量变量。）。

【讨论】：