Reactjs 默认下拉列表值仅在初始输入后呈现

我有一个输入表单，它有一个下拉菜单，我试图设置一个默认值。这个值从父组件传递下来，从异步函数接收（我认为它可能有一部分）。async函数在h1中呈现用户名，并正确显示在表单上方。它还充当根据姓名确定默认值的条件。我曾尝试在多个组件中使用state，结果总是“错误：重新渲染太多。React限制渲染数量以防止无限循环”。请查看下面的内容，并帮助我解决这个问题。如果您能提供一些关于我在这里缺少的概念的主题，我将不胜感激

const dashboard = (props)=>{
    const getName = async ()=>{
        try{~GETS DATA~
            setName(parsedData[0].user_name}
        catch{error}
    }

    let defaultSchool
 //switch statement chooses the value for the default in dropdown menu based on the name from GET
    switch(name){
        case "user1":
        defaultSchool= "Cool School"
        case "user2":
        defaultSchool= "Another School
    }
  return(
      <div>
          <InputForm defaultSchool= defaultSchool />
      </div>
  )
}

const仪表板=（道具）=>{
const getName=async（）=>{
尝试{~获取数据~
setName（parsedData[0]。用户名}
捕获{错误}
}
让我们去学校
//switch语句根据GET中的名称选择下拉菜单中的默认值
交换机（名称）{
案例“user1”：
defaultSchool=“酷学校”
案例“user2”：
defaultSchool=“另一所学校
}
返回(
)
}

上面是父组件，它将此数据向下传递到下一个包含输入表单的组件

const InputForm = ({defaultSchool})=>{
    const [school, setSchool]= useState(defaultSchool)
    const [some_state, setSome_State] = useState("")
    // numerous other states associated with the form with no significant relevance

        const onSubmitForm = async e => {
            e.preventDefault()
            try{~normally POSTS data~}
            catch{error}
        }
     
      return(
             <h1 className="text-center my-5 input 
                                   title">Input Form</h1>
             <form className="mt-5" onSubmit={onSubmitForm}>
             {/* DATE  */}
                    <input type="date"  name="connection_date" 
                                      placeholder="Date of Contact" 
                                       className="form-control" 
                                       value={connection_date} 
                         onChange={e => setDate(e.target.value)}/>
             {/* SCHOOL  */}
                 <select  type="text" name="school" 
                                       placeholder="School" className="form-control mt-3" 
                                       defaultValue={defaultSchool} value={defaultSchool} 
                                       onChange={e => setSchool(e.target.value)}>
                         // <option value="NADA" disabled>Choose your school</option>
                         // this is a default option i tried with defaultValue to stop the first 
                            value in the dropdown from showing which was unsuccessful also
                             to show but didn't work at all either
                         <option value="Cool School"> Cool School </option>
                         <option value="Another School">Another School </option>
                 <button className="btn btn-success btn-block mt-3 mb-5">Add</button>
              </form>
      )
}

constinputform=（{defaultSchool}）=>{
const[school，setSchool]=使用状态（默认学校）
const[some_state，setSome_state]=useState（“”）
//与该表格相关的许多其他国家没有重大相关性
const onSubmitForm=async e=>{
e、 预防默认值（）
尝试{~正常发布数据}
捕获{错误}
}
返回(
输入表格
{/*日期*/}
设置日期（e.target.value）}/>
{/*学校*/}
setSchool（e.target.value）}>
//选择你的学校
//这是一个默认选项，我使用defaultValue尝试停止第一个选项
在下拉列表中显示未成功的值
显示，但也没有工作
酷学校
另一所学校
添加
)
}

最初，默认学校在下拉列表中显示为所选项目；我单击“添加”按钮，学校不会提交。但是，在第一次单击“添加”按钮后，会出现正确的行为，并且每次额外单击都会提交学校。关于此问题，有许多SO帖子，但没有一篇包含React和hooks或提供任何内容关于有条件呈现下拉列表默认选项的详细信息

完整的代码示例：

 import React, { Fragment, useState, useEffect } from 'react'
 //components
 import InputConnection from './connectionlist/InputConnection'
 import ListConnections from './connectionlist/ListConnections'
 import LogoutBtn from './LogoutBtn'
 import ReportingLayout from './reporting/Layout/ReportingLayout'

const Dashboard = ({ setAuth }) => {
const [name, setName] = useState("")
const [allConnections, setAllConnections] = useState([])
const [connectionsChange, setConnectionsChange] = useState(false)
const [timeDay, setTimeDay] = useState("Good Morning,")
const auth = setAuth

const getName = async () => {
    try {
        const response = await fetch("/dashboard/", {
            method:"GET", 
            headers:{ token: localStorage.token }
        })

        const parseData = await response.json()
        // console.log(parseData)
    if (parseData.admin === 'lead') {
        setName("Lead School Counselor")
        setAllConnections(parseData.results)
    }else{
        setName(parseData[0].user_name)
        setAllConnections(parseData)
    }
    } catch (error) {
    
    }
}

const greeting = () => {
    let date = new Date()
    const hours = date.getHours()
    if(hours < 12){
        setTimeDay("Good Morning, ")
    }else if (hours >= 12 && hours < 17){
        setTimeDay("Good Afternoon, ")
    }else{
        setTimeDay("Good Evening, ")
    }
}

useEffect(() => {
    getName()
    greeting()
    setConnectionsChange(false)
}, [connectionsChange, timeDay])

if(name === "Lead School Counselor" ){
    return(
        <div>
            <ReportingLayout auth={auth} allConnections={ allConnections } />    
        </div>
       )
}else{
    let defaultSchool
    switch(name) {
      case 'Jim Smith':
        defaultSchool= "Cool School"
        break;
      case "Bob Williams":
        defaultSchool= "Another School"
        break;
  }

return(
    <Fragment>
        <div className="container">
            <div className='btn-group '>
                <LogoutBtn setAuth = {setAuth}/>
            </div>
                <h1 className="d-flex mt-3 pl-3" > {timeDay} 
    {name}&nbsp;&nbsp;</h1>
                <InputConnection defaultSchool={defaultSchool} 
setConnectionsChange={setConnectionsChange}/>
                <ListConnections allConnections={ allConnections } 
setConnectionsChange={setConnectionsChange}/> 
            </div>     
        </Fragment>
    )
}
}

import React，{Fragment，useState，useffect}来自'React'
//组成部分
从“./connectionlist/InputConnection”导入InputConnection
从“./connectionlist/ListConnections”导入ListConnections
从“./LogoutBtn”导入LogoutBtn
从“./reporting/Layout/ReportingLayout”导入ReportingLayout
const Dashboard=（{setAuth}）=>{
const[name，setName]=useState（“”）
常量[allConnections，setAllConnections]=useState（[]）
常量[connectionsChange，setConnectionsChange]=useState（false）
const[timeDay，setTimeDay]=useState（“早上好，”）
const auth=setAuth
const getName=async（）=>{
试一试{
const response=wait fetch（“/dashboard/”{
方法：“获取”，
标题：{token:localStorage.token}
})
const parseData=await response.json（）
//console.log（解析数据）
如果（parseData.admin==='lead'）{
setName（“首席学校顾问”）
setAllConnections（parseData.results）
}否则{
setName（parseData[0]。用户名）
setAllConnections（解析数据）
}
}捕获（错误）{
}
}
常量问候语=（）=>{
let date=新日期（）
const hours=date.getHours（）
如果（小时数<12）{
setTimeDay（“早上好，”）
}否则，如果（小时数>=12和小时数<17）{
setTimeDay（“下午好”）
}否则{
setTimeDay（“晚上好”）
}
}
useffect（（）=>{
getName（）
问候语（）
setConnectionsChange（错误）
}，[connectionsChange，timeDay]）
if（姓名=“首席学校辅导员”）{
返回(
)
}否则{
让我们去学校
交换机（名称）{
案例“吉姆·史密斯”：
defaultSchool=“酷学校”
打破
案例“鲍勃·威廉姆斯”：
defaultSchool=“另一所学校”
打破
}
返回(
{timeDay}
{name}
)
}
}

导出默认仪表板

下一个组成部分：

import React, { Fragment, useState } from "react";
import { toast } from 'react-toastify'

const InputTodo = ({ defaultSchool, setConnectionsChange }) => {

  const today = new Date()
  var formattedDate = today.toISOString().substr(0,10);
  const [contact_type, setContactType] = useState("");
  const [contact_method, setContactMethod] = useState("");
  const [provision, setProvision] = useState("");
  const [connection_date, setDate] = useState(formattedDate);
  const [student_id, setStudentID] = useState("");
  const [purpose, setPurpose] = useState("");
  const [gender, setGender] = useState("");
  const [yearGroup, setYearGroup] = useState("");
  const [referral_discharge, setReferralDischarge] = useState("");
  const [cp_referral, setCPReferral] = useState("");
  const [school, setSchool] = useState(defaultSchool);

  const onSubmitForm = async e => {
    e.preventDefault();
    try {
      const myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      myHeaders.append("token", localStorage.token);

     const body = { 
                  contact_type, 
                  contact_method, 
                  provision,
                  connection_date,
                  student_id,
                  purpose,
                  gender,
                  yearGroup,
                  school, 
                  referral_discharge, 
                  cp_referral
                };
  const response = await fetch("/dashboard/connections", {
    method: "POST",
    headers: myHeaders,
    body: JSON.stringify(body)
  });

  const parseResponse = await response.json();

  console.count(parseResponse);

  setConnectionsChange(true);
  setContactType("")
  setContactMethod("")
  setProvision("")
  setDate(formattedDate)
  setStudentID("")
  setPurpose("")
  setGender("")
  setYearGroup("")
  setSchool(defaultSchool)
  setReferralDischarge("")
  setCPReferral("")

  toast.success('Contact has been added', {
    position: "top-center",
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true, 
    draggable: true,
    });

    } catch (error) {
      console.error(error.message);
    }
 };
return (
    <Fragment>
      <h1 className="text-center my-5 input-title">Communication Log</h1>
      <form className="mt-5" onSubmit={onSubmitForm}>
    {/* DATE  */}
    <input type="date"  name="connection_date" placeholder="Date of Contact" 
    className="form-control" value={connection_date} onChange={e => 
    setDate(e.target.value)}/>
    {/* SCHOOL  */}
    <select  type="text" name="school" placeholder="School" className="form- 
    control mt-3" defaultValue={defaultSchool} value={defaultSchool} 
    onChange={e => setSchool(e.target.value)}>
        <option value="NADA" disabled>Choose your school</option>
      <optgroup label= "SEN">
          <option value="Cool School">Cool SChool</option>
          <option value= "Another School">Another School</option>
      
      </optgroup>
    </select>
    {/* SCHOOL ID */}
    <input type="text" name="student_id" placeholder="Student ID" 
    className="form-control mt-3" value={student_id} onChange={e => 
    setStudentID(e.target.value)}/>
    {/* YEAR / GROUP  */}
    <select type="text" name="yeargroup" placeholder="year/group" 
className="form-control mt-3" value={yearGroup} onChange={e => 
setYearGroup(e.target.value)}>
      <option value="DEFAULT">Choose the Year/ Group</option>
      <option value="yr01">yr01</option>
      <option value="yr02">yr02</option>
      <option value="yr03">yr03</option>
      <option value="yr04">yr04</option>
      <option value="yr05">yr05</option>
      <option value="yr06">yr06</option>
      <option value="yr07">yr07</option>
      <option value="yr08">yr08</option>
      <option value="yr09">yr09</option>
      <option value="yr10">yr10</option>
      <option value="yr11">yr11</option>
      <option value="yr12">yr12</option>
    </select>
    {/* GENDER  */}
    <select type="text" name="gender" placeholder="gender" className="form-control mt-3" value={gender} onChange={e => setGender(e.target.value)}>
      <option value="DEFAULT">Gender</option>
      <option value="M">M</option>
      <option value="F">F</option>
    </select>
    {/* REFERRAL OR DISCHARGE */}
    <select type="text" name="referral_discharge" placeholder="referral_discharge" className="form-control mt-3" value={referral_discharge} onChange={e => setReferralDischarge(e.target.value)}>
      <option value="DEFAULT">Was this a referral, continuation or discharge?</option>
      <option value="referral">Referral</option>
      <option value="discharge">Discharge</option>
      <option value="continuation">Continuation</option>
    </select>
  
    {/* CONTACT TYPE  */}
    <select type="text" name="contact_type" placeholder="contact_type" className="form-control mt-3" value={contact_type} onChange={e => setContactType(e.target.value)}>
      <option value="DEFAULT">Type of Contact</option>
      <option value="student">student</option>
      <option value="parent">parent</option>
      <option value="emergeny contact">emergeny contact</option>
      <option value="staff">staff</option>
      <option value="social worker">social worker</option>
      <option value="support staff">support staff</option>
      <option value="SENCO">SENCO</option>
      <option value="other">other</option>
    </select>

    {/* CONTACT METHOD  */}
    <select type="text" name="contact_method" placeholder="contact_method" className="form-control mt-3" value={contact_method} onChange={e => setContactMethod(e.target.value)}>
    <option value ="DEFAULT">Contact Mode/ Method</option>
      <option value="in-person">in-person</option>
      <option value="text">text</option>
      <option value="whatsapp">whatsapp</option>
      <option value="phone call">phone call</option>
      <option value="email">email</option>
      <option value="check-in">check-in</option>
      <option value="classroom presentation">classroom presentation</option>
      <option value="session">session</option>
      <option value="video chat">video chat</option>
      <option value="group">group session</option>
      <option value="crisis intervention">crisis intervention</option>
      <option value="home visit">home visit</option>
      <option value="sbst, mdt, case conference">sbst, mdt, case conference</option> 
      <option value="outside agency meeting">outside agency meeting</option>
      <option value="other meeting">other meeting</option>
      
    </select>
    {/* CP_REFERRAL  */}
    <select type="text" name="cp_referral" placeholder="cp_referral" className="form-control mt-3" value={cp_referral} onChange={e => setCPReferral(e.target.value)}>
      <option value="DEFAULT">Was this a CP Referral?</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
    {/* <div className='mt-3'>
      <p>Is this a CP REFERRAL?</p>
      <div className="form-check-inline">
          <input className="form-check-input" type="radio" name="cp_referral" id="y" value={cp_referral} onClick={(e)=> setCp_referral(e.target.value)}/>
          <label className="form-check-label">Yes</label>
      </div>

      <div className="form-check-inline">
        <input className="form-check-input" type="radio" name="cp_referral" id="n" value={cp_referral} onClick={(e)=> setCp_referral(e.target.value)}/>
        <label className="form-check-label">No</label>
      </div>
    </div> */}
    {/* PURPOSE  */}
    <textarea className="form-control mt-3" name="purpose" placeholder="What was the purpose of the connection?" value={purpose} onChange={e => setPurpose(e.target.value)}></textarea>
    {/* PROVISION  */}
    <textarea className="form-control mt-3" name="provision" placeholder="Provision/Support Agreed Upon/ Plan Forward (When Necessary) / Any Additional Notes" value={provision} onChange={e => setProvision(e.target.value)}></textarea>
    {/* BUTTON  */}
    <button className="btn btn-success btn-block mt-3 mb-5">Add</button>
  </form>
</Fragment>

import React，{Fragment，useState}来自“React”；
从“react toastify”导入{toast}
const inputDo=（{defaultSchool，setConnectionsChange}）=>{
const today=新日期（）
var formattedDate=today.toISOString（）.substr（0,10）；
const[contact_type，setContactType]=useState（“”）；
const[contact_method，setContactMethod]=useState（“”）；
const[provision，setProvision]=useState（“”）；
const[connection_date，setDate]=useState（formattedDate）；
const[student_id，setStudentID]=useState（“”）；
const[purpose，setPurpose]=useState（“”）；
const[gender，setGender]=useState（“”）；
const[yearGroup，setYearGroup]=useState（“”）；
const[Reference_discharge，setReferralDischarge]=useState（“”）；
const[cp_referral，setCPReferral]=useState（“”）；
const[school，setSchool]=使用状态（默认学校）；
const onSubmitForm=async e=>{
e、 预防默认值（）；
试一试{
const myHeaders=新的头（）；
append（“内容类型”、“应用程序/json”）；
附加（“token”，localStorage.token）；
常量体={
联系方式
const [school, setSchool] = useState(defaultSchool)

useEffect( () => {
    if ( defaultSchool & ! school ) {
        setSchool( defaultSchool );
    }
}, [defaultSchool, school]);