时间戳

首页 > 解决方案 > 值更改时反应钩子复选框未呈现

javascript - 值更改时反应钩子复选框未呈现

问题描述

当我从服务器获取数据并使用新数据设置父组件时，此子组件复选框没有更新。

子组件

const UrlInput = ({showCheckBox, checkBoxValue, onCheckBoxChange}) => {
    const [checkBoxVal, setCheckBoxVal] = useState(_.isUndefined(checkBoxValue) ? false : checkBoxValue);

    useEffect(() => {
        setCheckBoxVal(checkBoxValue)
        console.log(checkBoxValue)
    }, [checkBoxValue, checkBoxVal]);


    return (
        <div className="card">
            <div className="card-body">
                <div className="form-group">
        
                  <div className="form-group col-6">
                     <AvInput type="checkbox" name="urlCheckBox" onChange={onCheckBoxChange} value={checkBoxVal}/> Title is clickable
                  </div>
   

                </div>
            </div>
        </div>    
  );
};

export default UrlInput;

标签： javascriptreactjs

解决方案

在这种情况下不需要 useEffect ，因为您将复选框的值从父级传递给子级，并且您已经在父级中编写了 onChange 函数，因此每当您单击复选框时，状态“checkBoxValue”的值将被更改，它将重新渲染子组件。只要确保您将 event.target.checked 设置为孩子的状态即可。您也可以替换此行：- const [checkBoxVal, setCheckBoxVal] = useState(_.isUndefined(checkBoxValue) ? false : checkBoxValue);

有了这个：- const [checkBoxVal, setCheckBoxVal] = useState(checkBoxValue ? checkBoxValue : false);

推荐阅读