React表单输入值作为props传递时为undefined，资源加载报错如何修复？

• 直接访问组件类FormsAndInputs.data是无效操作：React类组件的state是组件实例的内部私有属性，仅在组件渲染挂载后存在于实例上，无法直接从组件类本身读取该属性，因此拿到的id天然为undefined，拼接文件路径后自然找不到对应文件。
• 组件状态无共享通道：表单组件和View组件分属不同路由，没有公共的状态存储或者传值通道，表单输入的值无法传递到View组件中。
• 额外隐患：使用动态拼接路径的require语法如果没有固定的路径前缀，webpack打包时无法正确识别静态资源，会额外增加找不到文件的概率。

第一步：修改form.js，支持父组件传入提交回调 #

import React, {Component } from 'react'
class FormsAndInputs extends Component {
    constructor(props){
        super(props)
        this.state={
            organismName: ''
        }
    }

    handleSubmit = (event) => {
        event.preventDefault()
        // 调用父组件传入的提交回调，把输入值传递出去
        this.props.onSubmit(this.state.organismName)
    }
    handleInputChange = (event) => {
        event.preventDefault()
        this.setState({
            [event.target.name] : event.target.value
        })
    }
    render () {
        const {organismName} = this.state
        return(
            <div>
               <h1> Enter the Organism ID</h1>
                <form onSubmit = {this.handleSubmit}>
            <p> <input type='text' placeholder ='Enter Organism ID'
                name='organismName' value={organismName} onChange = {this.handleInputChange} />
            </p>
            <p><button type="submit">Submit Data</button></p>
                </form>
            </div>
        )
}}
export default FormsAndInputs;

如果FormsAndInputs封装在Home组件内部，只需要把onSubmit回调逐层透传到表单组件即可。

第二步：修改Nav.js，增加状态存储输入值，提交后跳转路由 #

import React, {useState} from 'react'
import FormsAndInputs from './form';
// 需确保Router、Navbar、Switch、Route、Home等依赖已正确导入
  
function NAV() {
  const [organismId, setOrganismId] = useState('')

  // 表单提交回调：存储输入值+跳转到jbrowse页面
  const handleFormSubmit = (id) => {
    setOrganismId(id)
    // 把id放到路由查询参数中，刷新页面也不会丢失数据
    window.location.href = `/jbrowse/jbrowse?id=${id}`
  }

  return (
    <Router>
      <Navbar />
      <Switch>
        {/* 首页渲染表单，传入提交回调 */}
        <Route path='/' exact render={(props) => <Home {...props}><FormsAndInputs onSubmit={handleFormSubmit} /></Home>} />
        {/* 优先从路由参数取id，兜底用本地状态 */}
        <Route path='/jbrowse/jbrowse' render={(props) => {
          const searchParams = new URLSearchParams(props.location.search)
          const id = searchParams.get('id') || organismId
          return <View {...props} id={id} />
        }} />
      </Switch>
    </Router>
  )
}

第三步：修改View组件，增加空值判断，优化资源加载逻辑 #

function View(props) {
  // 空值判断，避免加载不存在的资源，无值时跳转回输入页
  if (!props.id) {
    window.location.href = '/'
    return <div>请先输入Organism ID</div>
  }
  // 固定路径前缀，让webpack可以正确识别静态资源
  const filePrefix = '../genome_data/'
  const fasta= require(`${filePrefix}${props.id}.fna`)  
  const fai= require(`${filePrefix}${props.id}.fna.fai`)
  const gff= require(`${filePrefix}Phyag_NZFS3770_genbank.sorted.gff.gz`)
  const gfftbi = require(`${filePrefix}Phyag_NZFS3770_genbank.sorted.gff.gz.tbi`)
  const ssrbw = require(`${filePrefix}${props.id}.bw`)

  // 原有业务逻辑保持不变
}

内容的提问来源于stack exchange，提问作者AU_97_CB