Question

我在isView中有一个setIsView和ParentComponent，然后将它们作为ChildComponent传递到props并尝试显示/隐藏有条件渲染，但setIsView似乎不起作用，道具中的isView值保持不变。

const ParentComponent = props => {
    const [isView, setIsView] = useState(true);

    const onChange = selectedOption => {
        selectedOption === 'Report'
            ? setIsView(true)
            : setIsView(false);
    };

    return (
        <div>
          <ChildComponent
             isView={isView} 
             onChange={onChange}
           />
        </div>
    );
};

const ChildComponent = props => {
    const {isView, onChange} = props;

    return (
        <div>
          <RadioButton 
             onChange={() => onChange('Not-Report')}
           />

           <If condition={isView}>
               <ChildComponent2>
           </If>
        </div>
    );
};

编辑：有人建议将onChange={onChange('Not-Report')}更改为onChange={() => onChange('Not-Report')}。仍然无法正常工作。

Answer 1

尝试将onChange方法作为回调函数提供。

conda activate base && conda activate --stack myEnv

Answer 2

如下更新子组件的onChange函数：

<RadioButton 
  onChange={() => onChange('Not-Report')}
/>

如果仅传递onChange，它将被视为以event作为参数的函数，而不是prop的onChange函数。

要使其像您一样工作，

const ChildComponent = ({isView, onChange}) => {
    const onRadioChange = () => {
       onChange('Not-Report')}
    }

    return (
        <div>
          <RadioButton 
             onChange={onRadioChange}
           />

           <If condition={isView}>
               <ChildComponent2>
           </If>
        </div>
    );
};

Answer 3

我写了这段代码
ParentComponent

const ParentComponent = (props) => {
  const [isView, setIsView] = useState(true);

  const onChange = (selectedOption) => {
    console.log("selectedOption = ", selectedOption);
    selectedOption === "Report" ? setIsView(true) : setIsView(false);
  };

  return (
    <div>
      <ChildComponent isView={isView} onChange={onChange} />
    </div>
  );
};

ChildComponent

const ChildComponent = (props) => {
  const { isView, onChange } = props;

  return (
    <div>
      <input
        type="radio"
        checked={isView}
        onClick={() => {
          onChange("Not-Report");
        }}
      />
      isView = {isView ? "true" : "false"}
    </div>
  );
};

我将onChange更改为onClick并使用checked

工作演示

React钩子集功能不适用于子组件

3 个答案: