时间戳

首页 > 解决方案 > 我不能在函数或效果挂钩中使用自定义挂钩的结果

reactjs - 我不能在函数或效果挂钩中使用自定义挂钩的结果

问题描述

我创建了一个自定义钩子，允许我返回人员列表

import {useEffect, useState} from "react";
import Person from "../../models/person/Person";

const usePersons = () => {
    const [persons, setPersons] = useState<Array<Person>>([]);

    useEffect(() => {
        setPersons([
            {id: 1, fullName: "Andrew Jones", createdAt: new Date(2001, 5, 12), bornAt: new Date(2002921)},
            {id: 2, fullName: "Williams Hope", createdAt: new Date(2020, 8, 13), bornAt: new Date(2002420)},
            {id: 3, fullName: "Markus Denzel", createdAt: new Date(2020, 8, 13), bornAt: new Date(2002420)},
            {id: 4, fullName: "John Lewis", createdAt: new Date(2020, 8, 13), bornAt: new Date(2002420)},
            {id: 5, fullName: "Abraham Lincoln", createdAt: new Date(2010, 0, 15), bornAt: new Date(2002420)},
            {id: 6, fullName: "Jack Bauer", createdAt: new Date(2020, 8, 13), bornAt: new Date(2002420)},
            {id: 7, fullName: "Sarah Watson", createdAt: new Date(2020, 8, 13), bornAt: new Date(2002420)}
        ]);
    }, []);
    return persons;
};

export default usePersons;

我创建了另一个自定义钩子，它返回一个 id 作为参数传递的人

import {useEffect, useState} from "react";
import Person from "../../models/person/Person";
import usePersons from "./persons.hooks";

const usePerson = (id: string) => {
    const [person, setPerson] = useState<Person|null>(null);
    const persons = usePersons();

    useEffect(() => {
        persons.forEach(person => {
            if (person.id) {
                if (person.id.toString() === id.toString()) {
                    setPerson(person);
                }
            }
        });
    }, [id]);

    return person;
};

export default usePerson;

然后我创建了一个页面，允许我显示给定人员的字段

import React, {FunctionComponent, useEffect, useState} from "react";
import { RouteComponentProps } from "react-router-dom";
import usePerson from "../../hooks/person/person.hooks";

type Params = {id: string};

const PersonDetail: FunctionComponent<RouteComponentProps<Params>> = ({match, history}) => {
    const person = usePerson(match.params.id);
    const handleGoBack = () => {
        history.replace('/persons');
    };
    return (
        <div>
            {console.log(person)}
            <h2>{person?.fullName}</h2>
            <button onClick={handleGoBack} className="btn btn-primary">Return to list</button>
        </div>
    );
};

export default PersonDetail;

{console.log (person)} 给了我空值。所以没什么可显示的。我不明白发生了什么。

标签： reactjstypescriptreact-hooks

解决方案

函数挂钩usePersons。在第一次调用时，它返回 null，因为useEffectinusePersons将在它返回 null 之后执行。与, useEffectof usePerson, 第一次调用相同，list persons将为空。我认为应该依赖useEffect于. 让我们试试：usePersonpersons

const usePerson = (id: string) => {
    const [person, setPerson] = useState<Person|null>(null);
    const persons = usePersons();

    useEffect(() => {
        persons.forEach(person => {
            if (person.id) {
                if (person.id.toString() === id.toString()) {
                    setPerson(person);
                }
            }
        });
    }, [id, persons]);

    return person;
};

推荐阅读