【避坑指“难”】Antd Tree半选状态halfCheckedKeys渲染问题

一、复现问题

Antd的Tree树形组件，勾选后，如果父节点下的所有子节点没有被勾选（半选状态），传值的时候是不会传父节点的，只有在勾选了所有子节点的时候（全选状态）才会传父节点的值。

二、解决方案

1）在半选的状态下，也要将父节点传值给后端

const [checkedKeys, setCheckedKeys] = useState<number[]>([]);
const [treeData, setTreeDate] = useState([]); 
const [paramsList, setParamsList] = useState([]);
const [initialList, setInitialList] = useState([]);

<Tree checkable onCheck={onCheck} checkedKeys={checkedKeys} treeData={treeData} />

调整onCheck()方法：

const onCheck = (keys: any, e: any) => {
    let arr = keys.concat(e.halfCheckedKeys)  
    setParamsList(arr) //传值给后端，里面包括了半选状态的父节点
    setCheckedKeys(keys);
};

halfCheckedKeys：会记录半选状态的父节点

2）回显渲染问题

useEffect(() => {
    const {location: { query }}: any = history;
    setRoleId(query.roleId);
    queryAuth(query.roleId);
 }, []);

const queryAuth = async (id: any) => {
    const list = await getAuthUser(id); //通过接口拿到列表数据
    const listData = list.data;
    setTreeDate(listData);

    let visibleList = [] as any;
    function lookUserAuth(data = [], arr = []) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].visible === 0) {//0选中，1未选中
          if (data[i].children && data[i].children.length){
            data[i].children.map((i: any)=>{
              visibleList.push(i.visible)
              if(visibleList.includes(1)){
                return
              }
              else{
                arr.push(i.key);
              }
            })
          }
          else{
            arr.push(data[i].key);
          }
        }
        if (data[i].children && data[i].children.length) 
        lookUserAuth(data[i].children, arr)
      }
      return arr
    }
    setCheckedKeys(lookUserAuth(listData));
};