Question

更像是JavaScript问题，然后是React one，但由于我遇到的问题是在React应用程序中，猜猜标题是否正确。

反正。我有一个包含API错误代码的对象，如下所示：

const apiErrors = {
    "500": "System is currently unavailable. Please contact you system administrator or try again later",
    "404": "There was a problem with your request. Please contact support",
    "403": "Access denied",
    "408": "Your request timed out.",
    "default": "Oops! Lorem ipsum dolor sit amet"
}

在我的组件中，我有API响应，错误状态。现在我想比较错误状态，如果有的话，并显示正确的友好错误。类似的东西：

componentDidUpdate(prevProps) {

  // map the object keys of apiErrors
  // compare it with the API error status
  if (this.props.error.response.status === apiErrors[i]//example: 403) {
    //show the corresponding error from the apiErrors
    //in this case 403 error "Access denied"
  }
}

但我不确切知道如何进行比较并显示正确的信息！

Answer 1

我认为你不应该在componentDidUpdate中这样做，而应该在componentWillReceiveProps中进行。

警告：如果您在没有相关检查的情况下尝试setState componentDidUpdate，则可能会进入无限渲染循环。

现在提出你的问题，

您可以直接查询apiErrors对象，如下所示： apiErrors[nextProps.error.response.status]

componentWillReceiveProps(nextProps) {
  if (nextProps.error && nextProps.error.response && nextProps.error.response.status && apiErrors[nextProps.error.response.status]) {
    this.setState({ errorMessage: apiErrors[nextProps.error.response.status] })
  }
}

if(...)语句中的检查次数可确保定义所有键，并且最终不会出现如下错误：Cannot read property response of undefined。

Answer 2

你想要的（我猜）是这样的：

const apiErrors = {
  "500": "System is currently unavailable. Please contact you system administrator or try again later",
  "404": "There was a problem with your request. Please contact support",
  "403": "Access denied",
  "408": "Your request timed out.",
  "default": "Oops! Lorem ipsum dolor sit amet"
}

class App extends React.Component {
  state = {
    code: undefined
  }
  render() {
    return ( <
      div >
      <
      ErrorMock onClick = {
        this.setStatus
      }
      code = {
        this.state.code
      }
      /> <
      StatusDisplay error = {
        {
          response: {
            status: this.state.code
          }
        }
      }
      /> <
      /div>
    )
  }
  setStatus = (code) => () => {
    this.setState({
      code
    })
  }
}

class ErrorMock extends React.Component {
  render() {
    const errorCodes = [500, 404, 403, 408, "default"]
    return ( <
      div >
      <
      h1 > Choose status error: < /h1> {
        errorCodes.map(code => < label > < input type = "radio"
          onClick = {
            this.props.onClick(code)
          }
          checked = {
            this.props.code === code
          }
          />{code}</label > )
      } <
      label > < input type = "radio"
      onClick = {
        this.props.onClick()
      }
      checked = {!this.props.code
      }
      />none</label >
      <
      /div>
    )
  }
}

class StatusDisplay extends React.Component {
  render() {
    if (!this.props.error.response.status) {
      return false
    }
    return <h2 > Error Message: {
      apiErrors[this.props.error.response.status]
    } < /h2>
  }
}

ReactDOM.render( < App / > , document.getElementById("root"))

实例：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

＆＃13;

var result = await unitOfWork.GetForSearchAutocomplete();

var obj = JsonConvert.DeserializeObject(result);
// or
// var obj = JsonConvert.DeserializeObject<Array<T>>(result)

return Json(obj);

＆＃13;

React js将值与对象键进行比较

2 个答案: