反应错误：已声明但从未读取其值。[6133]

Question

我创建了一个模态（受益人类型），当我选择人作为受益人类型并单击受益人类型模式中的下一个时，我试图调用另一个模态，但是当我尝试实施它时，我在下面失败两点： 1. 当我导入第二个 modal(personModal) 时，它向我显示消息“personModal 已声明，但它的值从未被读取。[6133]”尽管我也在使用该导入，因此它没有被导航. 2. 在点击受益人类型模态中的下一步按钮后导航到 personModal，我想隐藏第一个模态并只显示第二个模态，而不使用反应导航器和反应路线。有没有办法做到这一点？

请帮忙。

供您参考，请找到以下代码：

• 受益人类型模态

  import React, { Component } from 'react';
  import Select from 'gssp-common-ui/lib/components/select/select.component';
  import Button from 'gssp-common-ui/lib/components/button/button.component';
  import personModal from './personModal.component';
  
  
  const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50
  };
  const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: '0 auto',
      padding: 30,
      position: 'relative'
  };
  
  class Modal extends Component {
      constructor(props) {
          super(props);
          this.state = {
              dropDownValue: '',
              showBeneficiaryModel: false
          };
      }
      handleDropDownChange = (event, value) => {
          this.setState({ dropDownValue: value });
      }
      clickHandlernextBtn = (e) => {
          if ((e === 'click') && (this.state.dropDownValue === 'Person')) {
              return (
                  <div>
                      {console.log('Dropdown value is ', this.state.dropDownValue)}
                      <personModal />
                  </div>);
          }
      };
  
      render() {
          if (!this.props.show) {
              return null;
          }
  
          return (
              <div style={backdropStyle}>
                  <div style={modalStyle}>
                      <h5><b>{'Add Beneficiary'}</b></h5>
                      <p>{'All fields are required unless otherwise noted.'}</p>
                      {/* <form onSubmit={this.handleSubmit}>
  
                          <select value={this.state.value} onChange={this.handleChange} >
                              <b><option value="beneficiary type">{'Beneficiary Type'}</option></b>
                              <option value="person">{'Person'}</option>
                              <option value="living trust">{'Living Trust'}</option>
                              <option value="testamentary trust created in the insured’s will">{'Testamentary Trust created in the Insured’s Will'}</option>
                              <option value="charity/organization">{'Charity/Organization'}</option>
                              <option value="estate ">{'Estate '}</option>
                          </select>
  
                          <input type="submit" value="Submit" />
                      </form> */}
                      <Select
                          className="dropdown-class"
                          title={'Beneficiary Type'}
                          options={[
                              {
                                  key: 'Person',
                                  value: 'Person'
                              },
                              {
                                  key: 'Living Trust',
                                  value: 'Living Trust'
                              },
                              {
                                  key: 'Remove ClasTestamentary Trust created in the Insured’s Will',
          `enter code here`                        value: 'Testamentary Trust created in the Insured’s Will'
                       enter code here       },
                              {
                                  key: 'Charity/Organization',
                                  value: 'Charity/Organization'
                              },
                              {
                                  key: 'Estate',
                                  value: 'Estate'
                              }
  
  
                          ]
                          }
          onEvent={(event, value) => this.handleDropDownChange(event, value)}
                      />
                      <Button
                          value="NEXT"
                          className="next_btn"
                          id="SMDEmployer_schedulepayment_next-button"
                          onEvent={e => this.clickHandlernextBtn(e)}
                      />
                  </div>
              </div>
          );
      }
  }
  export default Modal;
  

• personModal 组件

  import React, { Component } from 'react';
  class personModal extends Component {
   constructor(props) {
      super(props);
      this.state = {
          dropDownValue: ''
      };
   }  
   render() {
    return (            
      <div>
          {'Hi PersonModal here'}
      </div>
    );
   }
  }
  export default personModal;
  

注意：按钮是工作正常的自定义组件。

Answer 1

我有同样的问题。其简单的解决方案是导入具有以大写字母开头的自定义名称的组件。

Answer 2

使用的personModal组件 <personModal />将被解释为HTML标记，因为它以小写字母开头。要使用组件，请将组件重命名为PersonModal或以大写开头的任何其他名称。