Javascript 如何在使用效果渲染之前填充对象

我必须在组件渲染时填充对象，然后显示该信息。 现在我尝试这样做，但有一个错误，我想，因为当我试图渲染信息对象时，仍然是空的。 如何解决此问题

console.log shows
{}
{}
{name: "Name"}
{name: "Name"}

export const UserCard: React.FC = () => {
let [mainInfo, setMainInfo] = useState({});

  useEffect(() => {
    setMainInfo({
      name: "Name"
    })
  }, [])

  console.log(mainInfo)
  return (
    <h1>{mainInfo.name}</h1>
 );
};

console.log显示
{}
{}
{name:“name”}
{name:“name”}
导出常量用户卡：React.FC=（）=>{
让[mainInfo，setMainInfo]=useState（{}）；
useffect（（）=>{
setMainInfo({
姓名：“姓名”
})
}, [])
控制台日志（mainfo）
返回(
{mainfo.name}
);
};

当您这样设置时：

let [mainInfo, setMainInfo] = useState({});

Typescript理解

mainfo

属于

{}

类型。即：没有任何属性的空对象

因此，当您尝试访问：

mainInfo.name

时，Typescript会告诉您，空对象上不存在

name

，而空对象是为

mainInfo

隐式定义的类型

我不知道您的用例，但您可能的解决方案如下：

interface MainInfo {
  name?: string;
}

const UserCard: React.FC = () => {
  let [mainInfo, setMainInfo] = useState<MainInfo>({});

  useEffect(() => {
    setTimeout(() => {
      setMainInfo({
        name: "Name"
      });
    }, 1000);
  }, []);

  return <h1>{mainInfo.name || "Loading..."}</h1>;
};

我明确地告诉Typescript，

mainfo

就是这种类型，方法是：

let [mainInfo, setMainInfo] = useState<MainInfo>({});

let[mainInfo，setMainInfo]=useState（{}）；

现在，所有的错误都消失了

PS：我添加了一个

setTimeout

来模拟一些异步数据。因为我看不出有任何其他原因可以不这么做：

useState（{name:“name”}）而不是在
useffect
中设置它

当您这样设置时：

let [mainInfo, setMainInfo] = useState({});

Typescript理解
mainfo
属于
{}
类型。即：没有任何属性的空对象

因此，当您尝试访问：
mainInfo.name
时，Typescript会告诉您，空对象上不存在
name
，而空对象是为
mainInfo
隐式定义的类型

我不知道您的用例，但您可能的解决方案如下：

interface MainInfo {
  name?: string;
}

const UserCard: React.FC = () => {
  let [mainInfo, setMainInfo] = useState<MainInfo>({});

  useEffect(() => {
    setTimeout(() => {
      setMainInfo({
        name: "Name"
      });
    }, 1000);
  }, []);

  return <h1>{mainInfo.name || "Loading..."}</h1>;
};

我明确地告诉Typescript，
mainfo
就是这种类型，方法是：

let [mainInfo, setMainInfo] = useState<MainInfo>({});

let[mainInfo，setMainInfo]=useState（{}）；


现在，所有的错误都消失了


PS：我添加了一个
setTimeout
来模拟一些异步数据。因为我看不出有任何其他原因可以不这么做：
useState（{name:“name”}）
而不是将其设置在应该工作的
useEffect
中。您可以共享整个代码或将其放在沙箱中吗？不确定您的确切用例，但如果您只想预设
mainfo
，您可以删除整个
useffect
，并将
{name:“name”}
移动到
useState（{name:“name”}）。如果您的意思是错误是因为您还没有数据，那么您需要在呈现之前添加一个条件，例如
If（mainfo.name）
。很抱歉，我没有说我使用的typescript可能因为它而不起作用：
{mainInfo.name | |'''}
不，不起作用（这应该行得通。你能分享你的整个代码还是把它放在沙箱里？不确定你的具体用例，但如果你只想预设
mainfo
，你可以删除整个
useffect
，并将
{name:“name”}
移动到
useState（{name:“name”}）
。如果您的意思是错误是因为您还没有数据，那么您需要在渲染之前添加一个条件，例如
If（mainfo.name）
。请参阅抱歉，我并不是说我使用的typescript可能因为它而不起作用：
{mainfo.name |''}
不，不起作用(