时间戳

首页 > 解决方案 > 如何使错误消息显示：无和显示：块？

reactjs - 如何使错误消息显示：无和显示：块？

问题描述

我有一个没有在渲染区域定义 ShowErrorWarning 的方法。我需要使用状态。但是我怎样才能让这个函数有效呢？

我已经尝试将错误消息用作类上方的函数 ShowErrorMessage。但是我不能包括状态。

function ShowWarning() {

let error = this.props.warningError.error;   

    if (error === "") {
        this.setState({
            ...this.state,
            errorStyle: {
                display: 'none'
            },
            warningMessage: ''
        });
    } else {
        this.setState({
            ...this.state,
            errorStyle: {
                display: 'block'
            },
            warningMessage: this.props.warningError.message
        }); 
    }

}

当我从 API 调用中收到错误时，错误消息将显示为单独的组件。这存储在 this.props.warningError.error 中。

标签： reactjsfunctionreduxstate

解决方案

您应该能够在 JSX 中使用简单的三元运算符，并渲染所需的组件或null基于warningError.error包含消息。

render() {
  const { warningError } = this.props;

  return (
    <div>
      {warningError.error !== '' ? <ErrorComponent message={warningError.message} /> : null}
    </div>
  );
}

推荐阅读