Reactjs useState不更改布尔状态，也不在单击时呈现子组件

我试图在名为TextInput的父组件中单击时，在下面显示具有一个输入字段的SingleLineText组件。但是，单击后，useState不会更改状态，因此名为SingleLineText的子组件不会显示

文本输入组件粘贴在单线文本组件的右下方

单线文本组件：

import React from "react";
const SingleLineText = () => {    
    return(
      <form>
        <input />
      </form>
    )
}
export default SingleLineText;

import React, {useState, useEffect} from "react";
import SingleLineText from "./SingleLineText"

const TextInput = (props) => {

 const [showSingleText, setShowSingleText] = useState(false);

 useEffect( () => {
 }, [showSingleText])

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      cancel();
      setShowSingleText(showSingleText => !showSingleText);
      //setShowSingleText(showSingleText => true);
    }
  }

  const cancel = () => {
    props.setShowInput(!props.showInput);
  }

  return (
    <>
      <div className="dropdown">
        <ul key={props.parentIndex}>
          {
            props.fieldType.map( (val, idx) => {
              return(
               <option key={idx}  value={val} className="dropdown-item" onClick={handleFieldDisplay}> {val} </option>
              )
           })
        }

        </ul>
      </div>
     
      {showSingleText && <SingleLineText />}
    </>
  )

}
export default TextInput;

import React, { useState, useEffect, useRef } from "react"
import PropTypes from "prop-types"
import TextInput from "components/pod_table/fields/inputs/TextInput";

const DynamicFields = (props) => {
  const fieldType = ['Checkbox', 'Dropdown', 'boolean', 'Single line text'];
  const [showDynamicField, setShowDynamicField ] = useState(false);
  const[showInput, setShowInput] = useState(false);

  useEffect(() => {}, [showDynamicField, showInput]);
  
  const handleShowDynamicField = (event) => {
     setShowDynamicField(!showDynamicField);
  }
     
  const handleSubDisplay = (event) => {
     if (event.target.value == "customise field type") {
       setShowDynamicField(!showDynamicField);
       setShowInput(!showInput);
     }
  }
  
  return (
    <React.Fragment>
      <div>
      <i className="bi bi-chevron-compact-down" onClick={handleShowDynamicField}></i>
       { showDynamicField &&
            (<div className="dropdown">

             <ul key={props.parentIndex}>
             {
                optionsHash.map( (val, idx) => {
                 return(
                  <option key={idx}  value={val} className="dropdown-item" onClick={handleSubDisplay}> {val} </option>
                 )
               })
             }

             </ul>
            </div>) }

        {showInput && <TextInput fieldType={fieldType} setShowInput={setShowInput} showInput={showInput} /> }
        </div>
    </React.Fragment>
  )

}

从“React”导入React；
常量SingleLineText=（）=>{
返回(
)
}
导出默认单线文本；

text输入SingleLineText组件的父组件：

import React from "react";
const SingleLineText = () => {    
    return(
      <form>
        <input />
      </form>
    )
}
export default SingleLineText;

import React, {useState, useEffect} from "react";
import SingleLineText from "./SingleLineText"

const TextInput = (props) => {

 const [showSingleText, setShowSingleText] = useState(false);

 useEffect( () => {
 }, [showSingleText])

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      cancel();
      setShowSingleText(showSingleText => !showSingleText);
      //setShowSingleText(showSingleText => true);
    }
  }

  const cancel = () => {
    props.setShowInput(!props.showInput);
  }

  return (
    <>
      <div className="dropdown">
        <ul key={props.parentIndex}>
          {
            props.fieldType.map( (val, idx) => {
              return(
               <option key={idx}  value={val} className="dropdown-item" onClick={handleFieldDisplay}> {val} </option>
              )
           })
        }

        </ul>
      </div>
     
      {showSingleText && <SingleLineText />}
    </>
  )

}
export default TextInput;

import React, { useState, useEffect, useRef } from "react"
import PropTypes from "prop-types"
import TextInput from "components/pod_table/fields/inputs/TextInput";

const DynamicFields = (props) => {
  const fieldType = ['Checkbox', 'Dropdown', 'boolean', 'Single line text'];
  const [showDynamicField, setShowDynamicField ] = useState(false);
  const[showInput, setShowInput] = useState(false);

  useEffect(() => {}, [showDynamicField, showInput]);
  
  const handleShowDynamicField = (event) => {
     setShowDynamicField(!showDynamicField);
  }
     
  const handleSubDisplay = (event) => {
     if (event.target.value == "customise field type") {
       setShowDynamicField(!showDynamicField);
       setShowInput(!showInput);
     }
  }
  
  return (
    <React.Fragment>
      <div>
      <i className="bi bi-chevron-compact-down" onClick={handleShowDynamicField}></i>
       { showDynamicField &&
            (<div className="dropdown">

             <ul key={props.parentIndex}>
             {
                optionsHash.map( (val, idx) => {
                 return(
                  <option key={idx}  value={val} className="dropdown-item" onClick={handleSubDisplay}> {val} </option>
                 )
               })
             }

             </ul>
            </div>) }

        {showInput && <TextInput fieldType={fieldType} setShowInput={setShowInput} showInput={showInput} /> }
        </div>
    </React.Fragment>
  )

}

import React，{useState，useffect}来自“React”；
从“/SingleLineText”导入SingleLineText
常量文本输入=（道具）=>{
const[showSingleText，setShowSingleText]=useState（false）；
useffect（（）=>{
}，[showSingleText]）
const handleFieldDisplay=（事件）=>{
if（event.target.value==“单行文本”）{
取消（）；
设置showSingleText（showSingleText=>！showSingleText）；
//设置showSingleText（showSingleText=>true）；
}
}
常量取消=（）=>{
props.setShowInput（！props.showInput）；
}
返回(

{
props.fieldType.map（（val，idx）=>{
返回(
{val}
)
})
}

{showSingleText&&}
)
}
导出默认文本输入；

最顶层或父级组件：

import React from "react";
const SingleLineText = () => {    
    return(
      <form>
        <input />
      </form>
    )
}
export default SingleLineText;

import React, {useState, useEffect} from "react";
import SingleLineText from "./SingleLineText"

const TextInput = (props) => {

 const [showSingleText, setShowSingleText] = useState(false);

 useEffect( () => {
 }, [showSingleText])

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      cancel();
      setShowSingleText(showSingleText => !showSingleText);
      //setShowSingleText(showSingleText => true);
    }
  }

  const cancel = () => {
    props.setShowInput(!props.showInput);
  }

  return (
    <>
      <div className="dropdown">
        <ul key={props.parentIndex}>
          {
            props.fieldType.map( (val, idx) => {
              return(
               <option key={idx}  value={val} className="dropdown-item" onClick={handleFieldDisplay}> {val} </option>
              )
           })
        }

        </ul>
      </div>
     
      {showSingleText && <SingleLineText />}
    </>
  )

}
export default TextInput;

import React, { useState, useEffect, useRef } from "react"
import PropTypes from "prop-types"
import TextInput from "components/pod_table/fields/inputs/TextInput";

const DynamicFields = (props) => {
  const fieldType = ['Checkbox', 'Dropdown', 'boolean', 'Single line text'];
  const [showDynamicField, setShowDynamicField ] = useState(false);
  const[showInput, setShowInput] = useState(false);

  useEffect(() => {}, [showDynamicField, showInput]);
  
  const handleShowDynamicField = (event) => {
     setShowDynamicField(!showDynamicField);
  }
     
  const handleSubDisplay = (event) => {
     if (event.target.value == "customise field type") {
       setShowDynamicField(!showDynamicField);
       setShowInput(!showInput);
     }
  }
  
  return (
    <React.Fragment>
      <div>
      <i className="bi bi-chevron-compact-down" onClick={handleShowDynamicField}></i>
       { showDynamicField &&
            (<div className="dropdown">

             <ul key={props.parentIndex}>
             {
                optionsHash.map( (val, idx) => {
                 return(
                  <option key={idx}  value={val} className="dropdown-item" onClick={handleSubDisplay}> {val} </option>
                 )
               })
             }

             </ul>
            </div>) }

        {showInput && <TextInput fieldType={fieldType} setShowInput={setShowInput} showInput={showInput} /> }
        </div>
    </React.Fragment>
  )

}

import React，{useState，useffect，useRef}来自“React”
从“道具类型”导入道具类型
从“组件/pod_表/字段/inputs/TextInput”导入TextInput；
常量动态字段=（道具）=>{
const fieldType=['Checkbox'，'Dropdown'，'boolean'，'Single line text']；
const[showDynamicField，setShowDynamicField]=使用状态（false）；
const[showInput，setShowInput]=useState（false）；
useffect（（）=>{}[showDynamicField，showInput]）；
常量handleShowDynamicField=（事件）=>{
设置showDynamicField（！showDynamicField）；
}
const handleSubDisplay=（事件）=>{
如果（event.target.value==“自定义字段类型”）{
设置showDynamicField（！showDynamicField）；
设置showInput（！showInput）；
}
}
返回(
{showDynamicField&&
(

{
选项哈希.map（（val，idx）=>{
返回(
{val}
)
})
}

) }
{showInput&&}
)
}

问题在于，在

handleFieldDisplayFunction

中，您正在调用

cancel

函数，该函数更改父状态

showInput

，从而卸载TextInput组件本身，因此TextInput组件内部的

showSingleText

状态更改没有任何效果

设计代码时，当您单击其中的某个选项时，无需卸载TextInput

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      setShowSingleText(showSingleText => !showSingleText);
    }
  }

---

这个

useffect（（）=>{}，[showDynamicField，showInput]）的意义是什么？可能与问题无关的方面已被删除。