ReactJS:道具在初始渲染时不加载.不能在未定义的变量上使用映射

Question

我有一个包含许多组件的复杂react应用程序。第一件事是当用户登录时，我从数据库中获取信息并将其存储在全局状态中，然后子组件使用props获取值，然后我加载相关数据。

组件是这样的:

const ProfileForm12 = (props) => {
const { profile } = props
...
...
profile.map(x=>console.log(x))
}
export default ProfileForm12 

在这里，我最初得到一个错误，崩溃的应用程序，因为配置文件是空的初始渲染，但在第二次渲染，数据加载。

不使用useState或useEffect如何解决这个问题，因为应用程序已经使用了很多状态，使用它们会导致太多的重新渲染。

我试着把这个放在if循环中，但是数据不会在前端加载。

更新:以下所有建议都有效。我会花点时间看看哪一个适合我的应用程序，但是感谢你们所有人的回答:)

Answer 1

我认为你可以在map方法之前保留一个null检查，以消除错误。

profile?.map(x=> console.log(x));

Answer 2

如果加载/初始化应用程序是所有组件的要求，你应该有一些" loading…"识别加载状态的屏幕，显示加载屏幕，一旦加载。渲染完整的应用程序

在整个应用程序中保护不受null的影响是不那么有效的。

Answer 3

您希望避免在未设置数据时呈现子组件，因此三元操作符(或逻辑表达式)应该确保

const ParentComponent = () => {
...    
return (
<>
...
{propsToSend && (<ChildComponent myprop={propsToSend}/>)}
</>
)
}

这样可以保证子组件只在定义了props的情况下才会呈现。