[英]REACT rendering array from the redux state on the UI
这是一个令人头疼的问题。 我的应用程序的这个组件已经完成一段时间了,我决定做一个小的:看似微不足道的重构,但它导致了一些奇怪的问题:
return (
<div>
{
status === "Open" ? ( // REMOVED THIS
<div style={{ color: "lightgrey" }}>
<h1 className="text-center">
{title} <span style={{ fontSize: "0.5em" }}>by {hostedBy}</span>
</h1>
<h3>
{" "}
<TournamentDescription key={_id} title={title} />{" "}
</h3>
<br />
<p
className="text-center"
style={{ color: "#56A8CBFF", fontSize: "2em" }}
>
~ {status} for registration ~
</p>
<h4 className="text-left mt-5">
{participants.length === 1
? `${participants.length} Registered Fighter`
: `${participants.length} Registered Fighters`}
</h4>
<ul>
{participants &&
participants.map((participant) => (
<li
key={participant._id}
className="text-left"
style={{ fontSize: "1.1em" }}
>
{participant.username}
</li>
))}
</ul>
{isAuthenticated ? (
<div>
<TournamentSignUp
participants={participants}
userId={user._id}
onClick={() => this.onSignUp(_id, user)}
/>
</div>
) : (
<Button block disabled>
Log in to sign up for this tournament
</Button>
)}
{isAuthenticated && user.username === hostedBy ? (
<div>
<StartTournament
participants={participants}
onClick={() => this.onStartTournament(_id, participants)}
/>
</div>
) : null}
</div>
) : (
<TournamentStartPage /> // REMOVED THIS
)
}
<br />
<Link to="/">Back to Tournaments main page</Link>
</div>
);
这个想法是为了在状态更改后显示的内容发生更改。
但是,当您单击链接以访问该组件时,UI 会闪烁并首先显示“已关闭”版本,这很丑陋。 所以我拆分了 em,另一个组件现在就在它自己的文件中,而这个组件只会渲染自己。
.. 所以我只是删除了 status==Open 条件。
所以上面的相同组件现在看起来像
return (
<div style={{ color: "lightgrey" }}>
<h1 className="text-center">
{title} <span style={{ fontSize: "0.5em" }}>by {hostedBy}</span>
</h1>
<h3>
{" "}
<TournamentDescription key={_id} title={title} />{" "}
</h3>
<br />
<p className="text-center" style={{ color: "#56A8CBFF", fontSize: "2em" }}>
~ {status} for registration ~
</p>
<h4 className="text-left mt-5">
{
participants.length === 1 // THIS BREAKS
? `${participants.length} Registered Fighter` // THIS BREAKS
: `${participants.length} Registered Fighters` // THIS BREAKS
}
</h4>
<ul>
{participants &&
participants.map((participant) => (
<li
key={participant._id}
className="text-left"
style={{ fontSize: "1.1em" }}
>
{" "}
{participant.username}
</li>
))}
</ul>
{isAuthenticated ? (
<div>
<TournamentSignUp
participants={participants}
userId={user._id}
onClick={() => this.onSignUp(_id, user)}
/>
</div>
) : (
<Button block disabled>
Log in to sign up for this tournament
</Button>
)}
{isAuthenticated && user.username === hostedBy ? (
<div>
<StartTournament
participants={participants}
onClick={() => this.onStartTournament(_id, participants)}
/>
</div>
) : null}
<br />
<Link to="/">Back to Tournaments main page</Link>
</div>
);
即使participants && participants.map()
仍然工作正常,这也会中断。 对我来说没有意义。
我得到的错误是Cannot read propery 'length' of undefined
为了测试它,我对participants
运行了一个 console.log,它在控制台中显示了两件事:
undefined
participants[]
那个undefined
的东西导致我的组件损坏,但之前显然不存在。
我清除了我的数据,以为里面有东西,但它仍在发生(参与者现在是一个空数组,所以它应该是 0)
我没有看到你得到的有什么奇怪的,也许status === "Open"
是一个保护子句,以避免undefined
进入该代码,只需添加另一个保护子句,其中错误指向participants && participants.length === 1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.