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

Question

说我收到这个 JSON:

"events": [
            {
              "description": "Some event",
              "details": "Issue found",
              "id": 0,
              "severity": "critical",
              "type": "blabla"
            },
]

我有一个 Component，它使用 severity 字段来定义它的 CSS class（类似于 className={e.serveity}）；

如果我收到的 severity 不在预期范围内（例如 critical、warning 等），我想执行一些操作，例如渲染另一个组件或完全执行其他操作。

放置这个验证代码的正确位置是什么？应该是：

在 Component 本身内；
在action内负责Promise；
在reducer内；

Answer 1

您应该在组件中执行此操作，并且在组件内您可以在 React 提供的生命周期方法（如 componentWillMount、componentDidMount、componentWillReceiveProps 和 render）中执行此操作。

请注意 componentWillMount 和 componentWillReceiveProps 已从最新的 React v16.3 中弃用。

所以你可以根据需要来做

如果你想在渲染中做那么

render(){
     this.state.events.map(item => {
          if(item != “critical” && item != “warning”){
                 //do stuff here
          }
     });
     return(

     );
   }

有很多方法可以在组件中执行此类逻辑。所以对于你的问题，推荐的地方是 component.

Actions 用于分派 action，reducer 用于在 Redux 状态下设置数据。

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

What is the correct place to validate data coming from the backend in ReactJS?

flux

reactjs

redux

redux-thunk

react-redux