React：为什么正确的做法是通过 props 接收 api 响应？

Question

我读到你的组件应该通过 props (mapStateToProps) 接收你的 API 响应，在它到达你的组件之前由 reducer 处理。

我的问题是那些道具没有被清除 - 搞砸了我的状态和渲染。

示例：我收到一条验证错误消息“validationErrorMsg”，我将状态设置为并呈现该状态。当用户触发另一个验证调用时，我会重置状态，但是当调用进行时，状态会再次填充包含旧的validationErrorMsg 的道具，该道具再次错误地更新状态。

我为解决这个问题所做的就是在我的 api 响应中调度 2 个事件。一个带有响应，另一个用于清除响应 - 这就是为什么要清除属性以使下一个正在运行的调用不会获取脏数据。

所以我的问题是，我做错了还是 API 响应不应该通过 props 系统来？

validate() {
  const { validateApiCall, formValues } = this.props;

  let serial = formValues.serial;

  this.setState({    
    validationError: undefined
  });

  validateApiCall({serialred});
}

下面的这个函数在按键、其他事件等上被调用。我刚刚重置了我的状态，但这将使用旧数据再次设置我的状态（通过 componentWillReceiveProps(nextProps) 是的，我知道不推荐使用）

function mapStateToProps( { upgrades} ) {
  let props = {
     propValidationError: (upgrades && upgrades.validationError ? upgrades.validationError : undefined)
  };
return props;

}

该死的，我又把旧东西拿回来了。

componentWillReceiveProps(nextProps) {
  if (nextProps.propValidationError) {
   this.setState({validationError: nextProps.tradeinValidationError});
  }
}

我目前对它的修复（感觉就像是因为糟糕的框架而被破解）。我通过调度另一个将清除道具的事件来清除道具。

try {
  const res = await axios.post(url, {formValues});
  dispatch({ type: FETCH_UPGRADES_TRADEIN_VALIDATE_DEVICE, payload: res.data });
  } catch (e) {
    const { data, status } = e.response;
    if (status >= 400 && status < 500) {
      dispatch({type: FETCH_UPGRADES_TRADEIN_VALIDATE_ERROR_RESPONSE, tradeinValidationError: data.message});
      dispatch({type: FETCH_UPGRADES_TRADEIN_VALIDATE_ERROR_RESPONSE_DONE, tradeinValidationError: data.message});
    }

Answer 1

当用户触发另一个验证调用时，您想要的行为是不再显示旧的validationErrorMsg，那么这意味着应该在用户触发另一个时从应用程序的状态中删除旧的错误消息验证调用。

状态存储的位置完全无关——组件的状态、Contex、Redux 等等。

如果您使用 Redux 并且存储错误消息的位置（完全可以的选择），那么您需要确保触发另一个验证调用的操作也删除旧的错误消息。

或者，也可以设置一个像“isFetching”这样的标志，将其设置为 true，并让组件在该标志为 true 时不显示错误消息，而是显示一些微调器。

无论如何，无论您将状态保存在哪里，所有这些相同的逻辑都需要发生。

Answer 2

API 响应应该来自 props。

如果您正在触发下一次验证，您可以重置存储/父组件中的值（不确定您如何传递这些道具）以不再传递相同的道具。

你能分享一些你如何处理的示例代码吗？