反应错误：已声明但从未读取其值。 [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组件重命名为PersonModal或以大写开头的任何其他名称。

Answer 3

在最新的 React 版本中，您不需要导入。 如果你'React' must be in scope when using JSXeslintreact/react-in-jsx-scope得到'React' must be in scope when using JSXeslintreact/react-in-jsx-scope那么在你的 eslint 文件中关闭它，如：

"react/react-in-jsx-scope": "off",

Answer 4

在我的设置中，我只需要将文件结尾更改为 .tsx，而不是 .ts。 如果您使用 JavaScript，则等效的可能是将 .js 文件更改为 .jsx 文件。