Arrays 在数组操作之后，如何使用钩子useffect、useState更新状态aka.reduce（）？

我从有效的firebase获取数据

在useEffect中，我使用useState将数据（数组）存储在状态中

我想在我的rfc render方法中使用这个数据，但首先需要减少它。我试图在原始的useEffect（与我获取数据的位置相同）中，在其他useEffect中，甚至在我的render方法中减少它

这些都不可能做到。我的累加器参数在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(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')
      }, [])

*/

import React，{useState，useffect}来自“React”
从“@material ui/core”导入{网格、纸张、排版、表格、表体、TableCell、表头、TableRow}
从“/../firebase”导入firebase
const db=firebase.firestore（）
导出默认功能分数（道具）{
设{match}=props
让[currentEvent，setcurrentEvent]=useState（null）
let[records，setRecords]=useState（[]）
let[data，setdata]=useState（null）
useffect（（）=>{
控制台日志（“生效1”）
db.collection（'events'）.doc（match.params.id）
.onSnapshot（文档=>{
setcurrentEvent（currentEvent={…doc.data（），uid:doc.id}）
setRecords（记录=doc.data（）.records）
})
}, [])
useffect（（）=>{
控制台日志（记录）
设x=记录。减少（（结果，记录）=>{
console.log（记录）
结果[记录.用户]=结果[记录.用户]| |[]
结果[record.user].push（record.time.seconds）
console.log（结果）
返回结果
}, [])
console.log（x）
setdata（x）
}[记录]）
如果（！currentEvent）{
返回（数据加载…）
}
返回(
{data.length}
参与者
运行1
运行2
运行3
)
}
/*
useffect（（）=>{
控制台日志（“hi”）
控制台日志（记录）
让数据=记录。减少（（结果，记录）=>{
结果[记录.用户]=结果[记录.用户]| |[]
结果[record.user].push（record.time.seconds）
console.log（'coucou'）
返回结果
}, [])
setRecords（记录='coucou'）
}, [])
*/

您的

.reduce（）函数有问题。将空数组作为初始值传递给
reduce
。如果
record.user
是字符串，则尝试使用字符串索引将其添加到数组值中。这就是为什么结果是空的。将第二个参数从空数组
[]
更改为空对象
{}
能否显示一个从firebase获得的数据示例？它只是一个对象数组。我可以在useffect钩子的开始处使用console.log“records”，这样我的数据就在那里了。在调用useState之前，我可以将我对它的操作的最终结果记录到console.log中。就这样。在那之后，有些问题。请添加一个示例。这将有助于给你一个正确的答案哦，非常感谢！！！！现在我得到了一些回报！！！！但是我不明白为什么我可以使用一个空的数组来记录结果，并返回我的数组中的全部数据？？？但我不能说。。。你能解释为什么空数组不能工作吗？如果我想要一个数组而不是一个对象呢？我当然可以翻译它，但是…@user1859295来自JS文档“数组不能使用字符串作为元素索引（如在关联数组中），但必须使用整数”。如果你想得到一个数组而不是一个对象，在
reduce
之后使用
object.values（data）
。是的，的确如此！！！非常感谢你！！！我怎么能接受你的回答？你帮我节省了很多时间！：）@用户1859295不客气。您可以单击我答案左侧的复选标记：）