Problem occurs when use find function in React

Question

I am new to react and I try to get data from the backend and view that data in the frontend. To do that I tried this code:

function VProfile() {

    const buyerId=(localStorage.getItem("userId"));
    console.log(buyerId);

    const [buyerDetails, setBuyerDetails] = useState({});

    useEffect(() => {
        axios
            .get(`/getBuyerDetails`)
            .then((response) => setBuyerDetails(response.data.existingBuyers))
            .catch((err) => console.error(err));
    }, []);

    console.log(buyerDetails);

    const oneBuyer = buyerDetails?.find(oneBuyer => oneBuyer.buyerId === buyerId);
    console.log(oneBuyer);
}

When I call the API I get a length 3 array of objects. This is an image of the data.

Then I try to find the data of a specific buyer using the find function. To do that I use this const oneBuyer = buyerDetails?.find(oneBuyer => oneBuyer.buyerId === buyerId) code. But then I got an error that says TypeError: buyerDetails.find is not a function. How do I silve this problem?

Thank You!

AKX · Accepted Answer · 2021-08-15 19:18:53Z

2

You initialize the state with an object ({}):

const [buyerDetails, setBuyerDetails] = useState({});

Objects don't have .find, only arrays do.

You might want to initialize it to an empty array ([]), or undefined to more clearly signal the case that the data is not yet loaded.

answered Aug 15, 2021 at 19:18

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gmoniava · Accepted Answer · 2021-08-15 19:25:35Z

1

You call setBuyerDetails asynchronously, so at the moment when you log them, the data hasn't arrived, due to console.log you are being "deceived" to believe the data is there. From docs:

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.

To avoid that error you can initialize that variable with empty array initially:

const [buyerDetails, setBuyerDetails] = useState([]);

edited Aug 15, 2021 at 19:25

answered Aug 15, 2021 at 19:19

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

Comments

Nisharg Shah · Accepted Answer · 2021-08-15 19:19:50Z

0

Do it something like that and initialize with an array and you are using async operations so please add the loading flag

function VProfile() {
    const buyerId=(localStorage.getItem("userId"));
    console.log(buyerId);

    const [buyerDetails, setBuyerDetails] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios
            .get(`/getBuyerDetails`)
            .then((response) => {
                setBuyerDetails(response.data.existingBuyers));
                setLoading(false);
            })
            .catch((err) => console.error(err));
    }, []);

    console.log(buyerDetails);

    if (loading) return <p>loading....</p>

    const oneBuyer = buyerDetails?.find(oneBuyer => oneBuyer.buyerId === buyerId);
    console.log(oneBuyer);
}

answered Aug 15, 2021 at 19:19

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

4 Comments

AKX Over a year ago

There's no need to use a separate state atom for the "loading" state when you can use e.g. undefined (or any other "out-of-band" value) for the data to be loaded to signal the same. :)

Nisharg Shah Over a year ago

Yes, you are right but this solution will works perfect when there are multiple calls

AKX Over a year ago

It's still likely not worth it to keep it a state atom - you could just as well do const loading = (data1 === undefined || data2 === undefined);...

Nisharg Shah Over a year ago

Yes that is also an option and its valid because setState will create new rerender

Collectives™ on Stack Overflow

Problem occurs when use find function in React

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related