如何console.log

Question

我有一个简单的remote，在其中我从一个远程API中获取数据，并且我想在console.log中使用useEffect。我试着去做，但是没有什么东西不被登录到控制台，为什么？我在这里错过了什么？以下是组件：

import React, { useState, useEffect } from 'react';

import { useLocalization } from '@progress/kendo-react-intl';
import { Card, CardHeader, Avatar, CardTitle, CardSubtitle } from '@progress/kendo-react-layout';
import { guid } from '@progress/kendo-react-common';

import { Scheduler } from './../components/Scheduler';

import { employees } from './../resources/employees';
import { images } from './../resources/images';
import { orders, ordersModelFields } from './../resources/orders';
import { teams } from './../resources/teams';

// const orderEmployees = employees.filter(employee => employee.jobTitle === 'Sales Representative');
// const initialFilterState = { };

// orderEmployees.forEach(employee => {
//     if(employee.fullName === 'Wait Peperell') {
//         initialFilterState[employee.id] = false;
//     } else {
//         initialFilterState[employee.id] = true;
//     }
// });

const Planning = () => {
    const localizationService = useLocalization();
    const [filterState, setFilterState] = React.useState(initialFilterState);
    const [data, setData] = React.useState(orders);
    const [fetchedData, setFetchedData] = React.useState(null);


     
    useEffect(() => {
        fetch("https://mocki.io/v1/29b83c0b-1a55-430d-a173-92b3632e04aa")
        .then(response => response.json())
            // 4. Setting *dogImage* to the image url that we received from the response above
        .then(data => setFetchedData(data))
        console.log(fetchedData)
      },[])
   
    //   console.log(fetchedData)


    const onDataChange = React.useCallback(
        ({ created, updated, deleted }) => {
            setData(old => old
                // Filter the deleted items
                .filter((item) => deleted.find(current => current[ordersModelFields.id] === item[ordersModelFields.id]) === undefined)
                // Find and replace the updated items
                .map((item) => updated.find(current => current[ordersModelFields.id] === item[ordersModelFields.id]) || item)
                // Add the newly created items and assign an `id`.
                .concat(created.map((item) => Object.assign({}, item, { [ordersModelFields.id]: guid() }))))
        },
        []
    );

    const onEmployeeClick = React.useCallback(
        (employeeId) => {
            setFilterState({
                ...filterState,
                [employeeId]: !filterState[employeeId]
            });
        },
        [filterState, setFilterState]
    );

    return (
        <div id="Planning" className="planning-page main-content">
            <div className="card-container grid">
                <h3 className="card-title">{localizationService.toLanguageString('custom.teamCalendar')}</h3>
                {

                    orderEmployees.map(employee => {
                        return (
                            <div
                                key={employee.id}
                                onClick={() => onEmployeeClick(employee.id)}
                                style={!filterState[employee.id] ? {opacity: .5} : {}}
                            >
                                <Card style={{ borderWidth: 0, cursor: 'pointer'}}>
                                    <CardHeader className="k-hbox" >
                                        <Avatar type='image' shape='circle' size={'large'} style={{
                                            borderWidth: 2,
                                            borderColor: teams.find(({teamID}) => teamID === employee.teamId).teamColor,
                                        }}>
                                            <div className="k-avatar-image" style={{
                                                backgroundImage: images[employee.imgId + employee.gender],
                                                backgroundSize: 'cover',
                                                backgroundPosition: 'center center',
                                            }}
                                            />
                                        </Avatar>
                                        <div>
                                            <CardTitle style={{color: teams.find(({teamID}) => teamID === employee.teamId).teamColor}}>{employee.fullName}</CardTitle>
                                            <CardSubtitle>{employee.jobTitle}</CardSubtitle>
                                        </div>
                                    </CardHeader>
                                </Card>
                            </div>
                        );
                    })
                }
                <div className="card-component" >
                    <Scheduler
                        data={data.filter(event => filterState[event.employeeID])}
                        onDataChange={onDataChange}
                        modelFields={ordersModelFields}
                        resources={[
                            {
                                name: 'Teams',
                                data: teams,
                                field: 'teamID',
                                valueField: 'teamID',
                                textField: 'teamName',
                                colorField: 'teamColor'
                            }
                        ]}
                    />
                </div>
            </div>
        </div>
    );
}

export default Planning;

我还试图将console.log放在useEffect之外，但仍然没有得到console.logged。

Answer 1

您需要了解useEffect是如何工作的，setFetchedData是异步的。

只为useEffect创建另一个console.log。

    useEffect(() => {
        console.log(fetchedData);
      },[fetchedData]); // Update at the first render + when fetchedData state change.

Answer 2

你可以这样做

useEffect(() => {
  fetch("https://mocki.io/v1/29b83c0b-1a55-430d-a173-92b3632e04aa")
    .then((response) => response.json())
    // 4. Setting *dogImage* to the image url that we received from the response above
    .then((data) => {
      setFetchedData(data);
      console.log(data);
    });
}, []);

或者只是创建另一个useEffect来侦听fetchedData的更改，如下所示

useEffect(() => {
  console.log(fetchedData);
}, [fetchedData]);