使用.forEach時陣列上的重復物件

我正在嘗試使用 .forEach 函式將資料推送到物件陣列中，以便我可以將可用反饋串列回傳到我的投資組合的管理員頁面，但是當它們被推送到feedback陣列中時，結果是dget中的物件重復，但奇怪的部分是只有最后一個被復制的物件被復制。

我嘗試在獲取之前重新分配陣列，使用 useState on d，使用 useState on feedback 和 dataArray 但它仍然回傳相同。

代碼：

import styles from '../../styles/Home.module.css';
import { supabase } from '../../lib/supabase';
import { useEffect, useState } from 'react';

interface s {
    session: any
}
interface dataObject {
    id: String,
    Name: String,
    Message: String,
}

const AdminPage = (props: s) => {
    let d = {} as dataObject
    const [loading, setLoading] = useState(false);
    const [feedback, setFeedback] = useState<any>([{}]); 
    const dataArray:Array<any> = [];
    
    const getFeedback = async () => {
        try {
            setLoading(true)
            let {data, error, status} = await supabase
                .from('Feedback')
                .select('id, Name, Message')
            if (error && status !== 406) throw error;
            if (data) {
                data.forEach(element => {
                    console.log('Data: ', data)
                    const {id, Name, Message} = element;
                    d.id = id;
                    d.Name = Name;
                    d.Message = Message;
                    feedback.push(d);
                });
            }
        } catch (error) {
            // @ts-ignore
            alert(error.message)
        } finally {
            setLoading(false)
            console.log('Feedback: ', feedback);
        }
    }
    const signOut = async () => {
        const { error } = await supabase.auth.signOut()
        if (error) throw error;
    }
    if (feedback !== [{}]) {
        feedback.forEach(element => {
            if (!element.id) return;
            dataArray.push(
            <div className={styles.card}>
                <div key={element.id}>
                 <p>{element.Name} says: &quot;{element.Message}&quot;</p>
                </div>
            </div>
            )
        })
        console.log('DataArray: ', dataArray )
    }
    return (
        <div>
            {loading ? (
                'Loading Data...'
            ): (
                <div>
                    {dataArray.length == 2 ? (
                        <div className={styles.error}>
                            <p>No data available...</p>
                            </div>
                            ): (
                                <div>
                                    <h1>Feedback</h1>
                                    {dataArray}
                                </div>)
                            
                        }
                    <button className={styles.button_d} onClick={signOut}>Signout</button>
                    <button className={styles.button} onClick={getFeedback}>Get Feedback JSON</button>
                    </div>
            )}
        </div>
    )
}

export default AdminPage;

安慰：

Data:  
Array [ {…}, {…} ]
?
0: Object { id: "927c5399-7251-4139-8a31-5417f9383d06", Name: "Raul Perez", Message: "This is a test feedback to try out the brand new feedback feature from perezbueno.xyz!" }
?
1: Object { id: "d8981533-d629-4082-b45d-1ac9b758e73e", Name: "Hello World", Message: "deez nuts" }
?
length: 2
?
<prototype>: Array []
index.tsx:29:28
DataArray:  
Array(4) [ [], dispatchAction(), {…}, {…} ]
?
0: Array []
?
1: function dispatchAction()
?
2: Object { "$$typeof": Symbol("react.element"), type: "div", key: null, … }
?
3: Object { "$$typeof": Symbol("react.element"), type: "div", key: null, … }
?
length: 4
?
<prototype>: Array []
index.tsx:60:16
Feedback:  
Array(3) [ {}, {…}, {…} ]
?
0: Object {  }
?
1: Object { id: "d8981533-d629-4082-b45d-1ac9b758e73e", Name: "Hello World", Message: "deez nuts" }
?
2: Object { id: "d8981533-d629-4082-b45d-1ac9b758e73e", Name: "Hello World", Message: "deez nuts" }
?
length: 3
?
<prototype>: Array []

uj5u.com熱心網友回復：

您需要使用 setFeedback 來更新您的狀態，而不是使用 feedback.push。替換feedback.push為setFeedback([...feedback,d])它應該可以解決您的問題

uj5u.com熱心網友回復：

我認為當改變狀態時，應該使用setstate。feedback.push(d) 應該更改為

setfeedback(...feedback,d)

標籤：javascript 数组 反应 打字稿

上一篇：如果物件值是陣列，如何轉換陣列中的物件以創建它自己的倍數

下一篇：如何按屬性值對物件陣列進行排序并在該值相等時求和？