React.js中Props.email属性值无法在页面正常渲染显示问题

页面实际渲染的<Ternaryi />是写在App组件return结构里的那一个，你只给它传了name={count}属性，根本没传email属性。
写在getFormData提交事件函数里的<Ternaryi email={"hyy"}/>是无效死代码：React组件只有放在return的JSX模板中、被渲染流程挂载到DOM树才会生效，在普通事件函数里直接写组件标签不会触发任何渲染，自然也不会把email属性传到页面上的组件实例中。
另外原代码还有两个隐藏问题：

• select选项的value默认是字符串类型，直接和数字1/2/3做判断会出现类型不匹配的逻辑异常
• 未选择选项直接提交时，count为null会直接走到三元判断最后一个分支，显示不符合预期的"Welcome user 3"

• 新增email对应的state状态，在表单提交时更新该状态
• 给实际渲染的Ternaryi组件传入email属性
• 给select选项绑定明确的value值，转成数字类型避免类型判断错误
• 补全空状态判断，优化展示逻辑

App.js #

import "./App.css";
import React, { useState } from "react";
import Ternaryi from "./Ternaryi";

function App() {
  const [count, setCount] = useState(null);
  const [email, setEmail] = useState("");

  function getFormData(e) {
    e.preventDefault();
    console.log(count);
    // 提交时更新email值，触发组件重渲染
    setEmail("hyy");
  }

  return (
    <div className="App">
      <form onSubmit={getFormData}>
        <select onChange={(e) => setCount(Number(e.target.value))}>
          <option value={null}>select option</option>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
        </select>
        <button type="submit">submit</button>
      </form>
      {/* 给渲染的组件同时传入name和email属性 */}
      <Ternaryi name={count} email={email}/>
    </div>
  );
}

export default App;

Ternaryi.js #

function Ternaryi(props) {
    return (
      <div>
        <h1>email = {props.email || '等待提交获取email'}</h1>
        {props.name === 1 ? <h1>Welcome user 1</h1>
          : props.name === 2 ? <h1>Welcome user 2</h1>
          : props.name === 3 ? <h1>Welcome user 3</h1>
          : <h1>请选择对应选项</h1>
        }
      </div>
    )
}
  
export default Ternaryi;

修复后提交表单，就能正常在页面看到打印的email值，count对应的欢迎内容也能按选择正确匹配。

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