编辑:请在下面找到我的完整组件代码。在useEffect上没有刷新“数据”状态...这是怎么回事!
我从useEffect中的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(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')
}, [])
*/
发布于 2019-05-21 04:59:46
看起来您正在处理返回函数中的所有内容,使用与componentWillUnmount
类似的useEffect
-如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])
发布于 2021-05-12 22:07:40
setdata(data = x)
这不是您应该使用useState
钩子的方式。在这一行中,您试图将一个值赋给状态变量,作为状态更新函数的参数。
它应该看起来像这样的setdata(x)
检查你的开发工具是否有错误(TypeError:赋值给常量变量)。
https://stackoverflow.com/questions/56227937
复制相似问题