在 ReactJS 中验证来自后端的数据的正确位置是啥?
Posted
技术标签:
【中文标题】在 ReactJS 中验证来自后端的数据的正确位置是啥?【英文标题】:What is the correct place to validate data coming from the backend in ReactJS?在 ReactJS 中验证来自后端的数据的正确位置是什么? 【发布时间】:2019-02-26 04:41:28 【问题描述】:假设我收到了这个 JSON:
"events": [
"description": "Some event",
"details": "Issue found",
"id": 0,
"severity": "critical",
"type": "blabla"
,
]
我有一个Component
,它使用severity
字段来定义它的CSS 类(类似于className=e.serveity
);
如果我收到的severity
不在预期范围内(例如critical、warning 等),我想执行一些操作,例如渲染另一个组件或完全做其他事情。
放置此验证代码的正确位置是什么?应该是:
-
在
Component
本身内;
在负责Promise的action
内;
在reducer
内;
【问题讨论】:
您可以验证数据存储组件中的数据。将其存储为组件可能是有意义的。你还在用旗帜做其他事情吗? 我会选择该操作,如果您希望您的应用程序在这种情况下采用另一条路线,您可以轻松调度另一个操作 @Demon 我在同一组件内的.reduce()
函数中使用它
【参考方案1】:
您应该在组件和组件内执行此操作,您可以在 react 提供的生命周期方法(如 componentWillMount、componentDidMount、componentWillReceiveProps 和渲染)中执行此操作。
请注意,最新的 React v16.3 已弃用 componentWillMount 和 componentWillReceiveProps。
所以你可以根据需要这样做
如果你想在渲染中做那么
render()
this.state.events.map(item =>
if(item != “critical” && item != “warning”)
//do stuff here
);
return(
);
有很多方法可以在组件中执行此类逻辑。所以对于你的问题,推荐的地方是组件。
Actions 用于调度一个操作,reducer 用于将数据设置为 Redux 状态。
【讨论】:
以上是关于在 ReactJS 中验证来自后端的数据的正确位置是啥?的主要内容,如果未能解决你的问题,请参考以下文章
如何调试来自 ReactJs(另一个项目)客户端的 Laravel API 请求?
无法读取未定义的 reactjs JWT 身份验证的属性“令牌”