在 ReactJS 中验证来自后端的数据的正确位置是啥？

Posted 2023-02-22

【中文标题】在 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 状态。