在我的主函数 App() 中，在 useEffect() 中，我使用一些 API 成功获取数据（名为 document 的变量）。我的数据是带有一些字段的对象，即 title 和 text 。

我通过我的函数传递这些数据，并希望不同的函数使用文档的不同部分。稍后，我成功呈现标题：

import React from 'react'
import "./Title.css"

function Title({document}) {
    return (
        <div className="title">
            {document.title}
        </div>
    )
}

export default Title;

我也想呈现“文本”字段， 但 我想在换行符上拆分它

import {useState, useEffect} from 'react'
import React from 'react'

function SourceText({ document }) {
    return (
        <div>
            {document.text.split()}
        </div>
    )
}

export default SourceText

这不起作用并返回错误

TypeError: document.text is undefined

这很奇怪，因为当我在 div 中仅返回 document.text 时，此对象存在。

我试图添加类似这样的内容

const [text, setText] = React.useState(null);
React.useEffect(() => {
    setText(document.text)
    console.log(document.text);
}, []);

但它看起来并没有将 document.text 值设置为 text 变量。我不明白的是，在添加这些代码行后，浏览器中的控制台会打印整个对象。

我是 React 和 JavaScript 的新手，我真的不明白如何修改和使用传递给函数的值。

谢谢

编辑： 我将文档从 App 传递给 TabGroup ，然后传递给 Source ，然后传递给 SourceText 。最后一个在这里：

import './Source.css';
import SourceText from './SourceText';
import Title from './Title';

function Source({document}) {
  return (
    <div className="source"> 

        <Title title={document.title}/>
        <SourceText document={document} />

    </div>
  );
}

export default Source;

正如我提到的，标题总是呈现，在 SourceText 中仅使用 {document.text 也可以工作