Saya mengambil data dari API menggunakan axios. Di halaman detail faktur saya ketika saya mencoba untuk mendapatkan data hanya satu faktur menggunakan kode ini

    const id = props.match.params.id;

    const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));

Ini mengembalikan objek atau tidak terdefinisi tetapi saya hanya ingin objek di dalam array atau array kosong tidak terdefinisi bagaimana saya harus melakukannya? Ketika saya mencoba menggunakan metode .filter alih-alih .find, itu mencatat array ke dalam waktu tak terbatas konsol.

Kode lengkap:

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import backIcon from '../assets/images/icon-arrow-left.svg'
import InvoiceDetailsHeader from './InvoiceDetailsHeader';
import { useSelector } from 'react-redux';
// remove this after adding DB
import data from '../data.json'
import InvoiceCardDetails from './InvoiceCardDetails';

const InvoiceDetails = (props) => {
    const [invoiceData, setInvoiceData] = useState([]);
    const id = props.match.params.id;

    const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));

    useEffect(() => {
        setInvoiceData(invoice);
        // console.log(invoiceData)
    }, [id, invoice]);

    return (
        <div className="mx-auto px-12 py-16 w-full max-w-3xl">
            <Link to="/" className="text-neutral text-xs"><img className="inline -mt-1 mr-4" src={backIcon} alt="back" /> Go back</Link>
            <InvoiceDetailsHeader data={invoiceData} />
            <InvoiceCardDetails data={invoiceData} />
        </div>
    )
}

export default InvoiceDetails

Siapapun tolong bantu saya dengan ini.

0
Rishi Purwar 21 September 2021, 07:24

3 jawaban

Jawaban Terbaik

Saya pikir itu karena Anda mengatur setInvoiceData(faktur) yang tidak ditentukan di awal. jadi periksa

 if(invoice){
setInvoiceData([invoice])
}

Silakan coba yang ini

1
Dawood Ahmad 21 September 2021, 05:29
useEffect(() => {
    if(invoice){
       setInvoiceData([...invoiceData, invoice])
    }
}, [id, invoice]);
1
mouafus 21 September 2021, 04:42

Pertama-tama, saya tidak tahu apakah saya melewatkan sesuatu, tetapi saya pikir itu bukan cara yang baik agar faktur dimungkinkan untuk objek dan array kosong. Saya pikir cara yang lebih baik adalah dengan membagi kondisi dan membuat faktur ketika ID tidak ditemukan.


Jika metode filter digunakan sebagai ganti pencarian, metode filter mengembalikan instance array baru setiap kali. Jadi saat argumen kedua (faktur) penggunaan Efek berubah, panggilan balik pembaruan penggunaan Efek akan terus diulang.

const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id) ?? []);

Apa yang Anda inginkan dapat dilakukan hanya dengan menggunakan Operator penggabungan Nullish< /a>. Namun, [] juga membuat instance array baru, jadi update callback diulang tanpa batas.

Jadi untuk membuat apa yang Anda inginkan berfungsi dalam kode saat ini, harap hapus invoice dari ketergantungan useEffect seperti di bawah ini.

useEffect(() => {
  setInvoiceData(invoice);
  // console.log(invoiceData)
}, [id]);
1
lowfront 21 September 2021, 05:18