反應錯誤：已聲明但從未讀取其值。 [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 文件。