如何将array.duce()与react hood usestate，使用效果使用

Question

编辑：请在下面找到我的整个组件代码。没有"数据"状态在使用效率上刷新...什么是什么！！！

我从firebase中获取使用效率的数据。在使用效果中，我将数据(这是一个数组(存储在使用Usestate的状态中。我想在我的RFC渲染方法中使用这些数据，但首先需要减少((。我试图以其他使用效应甚至在我的渲染方法中以原始使用效应(与获取数据获取数据的位置相同(进行减少。这些实际上都无法做到。我的累加器参数在我的减少功能中保持空。拜托，我真的需要一些帮助。

 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')
      }, [])
*/

Answer 1

看起来您正在处理返回功能内部的所有内容， useEffect的工作方式类似于 componentWillUnmount-

在返回功能之前尝试运行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])

Answer 2

setdata(data = x)

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

看起来应该像这个setdata(x)

更多信息在这里...

检查您的DEV工具是否错误(TypeError：分配到常数变量。(。