Reactjs useState 不改变布尔状态，也不在点击时渲染子组件答案

【问题标题】：Reactjs useState not changing boolean state and not rendering child component on clickReactjs useState 不改变布尔状态，也不在点击时渲染子组件
【发布时间】：2021-04-28 16:24:33
【问题描述】：

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

TextInput 组件粘贴在 SingleLineText 组件的正下方。

SingleLineText 组件：

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

TextInput 为 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>
  )

}

【问题讨论】：

useEffect(() => {}, [showDynamicField, showInput]); 的意义何在？
可能与问题无关的方面已被删除。

标签： reactjs react-hooks use-effect react-component

【解决方案1】：

问题在于，在 handleFieldDisplayFunction 中，您正在调用 cancel 函数，该函数会更改父状态 showInput 并因此卸载 TextInput 组件本身，因此 TextInput 组件内的 showSingleText 状态更改没有任何效果。

以当您单击其中的选项时不需要卸载 TextInput 的方式设计您的代码

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

【讨论】：