Как использовать array.reduce () с реагирующим хуком useState, useEffect? - PullRequest
Новая
       13

Как использовать array.reduce () с реагирующим хуком useState, useEffect?

0 голосов
/ 20 мая 2019

Редактировать: Пожалуйста, найдите весь мой код компонента ниже.При использовании useEffect состояние "data" не обновляется ... Какого черта !!!

Я получаю данные из firebase в useEffect.В useEffect я храню свои данные (которые являются массивом) в состоянии, используя useState.Я хочу использовать эти данные в моем методе рендеринга rfc, но сначала нужно его уменьшить ().Я попытался уменьшить его в оригинальном useEffect (то же, где я получаю данные), в другом useEffect или даже в моем методе рендеринга.Ничто из этого не могло сделать это на самом деле.Мой аргумент накопителя остается пустым в моей функции приведения.Пожалуйста, мне действительно нужна помощь в этом.


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

*/

1 Ответ

1 голос
/ 20 мая 2019

Похоже, что вы обрабатываете все внутри функции возврата, с 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])
...