数组的元素在console.log中定义，但未在return语句中定义

Question

我正在尝试访问一个道具的元素。我可以使用console.log访问元素，但不能在return中访问。

function Viewer(props) {
// Step 1: Viewer receives a prop called "json".
    
const Footer = (props) => {
        console.log(props.json.lines[1]) // Step 3: This successfully logs the second element of the array.
        return (
            { props.json.lines[1] } // Step 4: "TypeError: props.json is undefined" (but it's not) 
        )
    }

    // Step 2: Viewer calls Footer, passing prop.json to Footer.
    return (
        <main>
            <Footer
                json={props.json}
            />
        </main>
    )
}

这段代码看起来很简单，但并不能正常工作。即使对元素单词执行console.log操作，尝试返回该元素也会产生TypeError: props.json is undefined。

Answer 1

Emile的评论导致了解决方案。我通过以下方式解决了这个问题：

从单独的view.

• Redeclaring页脚中的主file.

• Importing页脚移回主视图中的

1. ，并将主视图的道具传递给新导入的页脚。

我不知道为什么会这样。

Answer 2

尝试在这个props变量中添加一些验证：

return (
    <main>
        <Footer
            json={props.json && props.json}
        />
    </main>
)

Answer 3

我得到了一个与你提到的类型错误不同的错误。

error: unknown: Unexpected token, expected "," (8:20)

   6 |         return (
   7 |             // Step 4: "TypeError: props.json is undefined" (but it's not) 
>  8 |              { props.json.lines[1] }
     |                     ^
   9 |         )
  10 |     }
  11 | 

如果将{ props.json.lines[1] }更改为<main>{ props.json.lines[1] }<main>，则可以看到已经定义了json。

原因可能是，从组件返回的应该是react元素对象，但{props.json.lines[1]}是事件而不是对象。