React表单onSubmit处理函数异常：无法渲染SearchResult组件

你当前的问题在于React组件不能在事件处理函数里直接创建就渲染，React的渲染是由组件的状态/属性变化驱动的，只有组件return的JSX结构里的元素才会被渲染到页面上。你在handleSubmit里写<SearchResult trackingNum={trackNo}/>只是创建了一个组件对象，但没有把它放到渲染流里，所以不会显示。

解决步骤 #

1. 添加两个状态：一个控制结果组件是否显示，另一个存储要展示的追踪编号（因为你提交后会清空trackNo，所以需要单独存结果值）
2. 在提交时更新这两个状态，触发组件重新渲染
3. 在组件的JSX输出中，根据状态决定是否渲染SearchResult

修改后的完整代码 #

import { useState } from 'react'; // 别忘了导入useState

function SearchForm( props ) {
  const [ trackNo, setTrackNo ] = useState('');
  // 新增状态：控制结果是否显示，以及存储要展示的追踪号
  const [showResult, setShowResult] = useState(false);
  const [resultTrackNo, setResultTrackNo] = useState('');

  function handleSubmit( event ) {
    event.preventDefault();
    // 先把要显示的追踪号存起来
    setResultTrackNo(trackNo);
    // 开启结果显示
    setShowResult(true);
    setTrackNo('');
  }

  return (
    <div className="SearchBar">
      <h3>Track a Package</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={trackNo}
          onChange={ event => setTrackNo(event.target.value)}
          placeholder="Enter a Tracking Number"
          required
        />
        <button type="submit">Search</button>
      </form>
      {/* 根据showResult状态决定是否渲染结果组件 */}
      {showResult && <SearchResult trackingNum={resultTrackNo}/>}
    </div>
  )
}

function SearchResult( props ){
  return (
    <div className="SearchResult">
      <b>Tracking Number: { props.trackingNum }</b>
    </div>
  )
}

补充说明 #

• React的核心是状态驱动视图：当状态发生变化时，组件会重新执行render逻辑（也就是return里的JSX），所以要让组件显示，必须把它放到return的JSX中，用状态来控制它的出现/消失。
• 为什么要单独存resultTrackNo？因为你提交后会清空trackNo，如果直接用trackNo传递给SearchResult，清空后结果就会变成空，所以需要把提交时的追踪号单独保存下来。

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