為什么我不能直接在子組件中訪問道具？

Question

我已將數據作為 JavaScript Object 存儲在文件（details.js）中，然后我試圖將其作為道具從 MainComponent 傳遞給 ChildComponent。 好吧，道具可以在 ChildComponent 中訪問，但我可以使用props.ChildDetails[0].name而不是props.name直接訪問它，如官方文檔中所示

我的代碼有什么不正確的地方？

細節.js

export const DETAILS=[
    {
        id:0,
        profile:'/assests/images/john.png',
        name:'John Doe',
    }
]

MainComponent.js

import React,{useState} from 'react';
import Child from './ChildComponent';
import {DETAILS} from '../Shared/details';
function MainComponent(){
    return(
        <>
            <Child ChildDetails={DETAILS}/>
        </>
    );
}
export default MainComponent;

ChildComponent.js

import React from 'react';
function ChildComponent(props){
    console.log(props.name) //Output:undefined
    console.log(props.ChildDetails[0].name) //Output:John Doe
    return(
        <div></div>
    );
}

export default ChildComponent;

Answer 1

因為詳細信息是 object。 嘗試類似：

function ChildComponent({ ChildDetails }){
    const { name } = ChildDetails[0]
    ...
}

這甚至不是 React。 那是 JavaScript

編輯. 哎呀。 人們說那是一個數組。 我以為它只是一個 object。 固定代碼一點

Answer 2

這是您通過 object 的地方

<Child ChildDetails={DETAILS}/>

這是您嘗試使用它的方式

console.log(props.name) //Output:undefined

由於您將名稱定義為ChildDetails ，因此沒有 props.name 這樣的東西，您必須說

console.log(props.ChildDetails)

如果你想訪問一個name ，你應該聲明索引如果沒有反應不知道你想使用哪個索引，就像你之前做的那樣

 props.ChildDetails[0].name