[pit avoidance refers to "difficult"] halfcheckedkeys rendering problem in semi selected status of antd tree

One 、 Repetition problem

Antd Of Tree Tree components , After checking , If all child nodes under the parent node are not checked （ Semi selected state ）, Values are not transferred to the parent node , Only when all child nodes are checked （ Select all ） The value of the parent node .

Two 、 Solution

1） In the half selected state , Also pass the value of the parent node to the backend

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} />

adjustment onCheck() Method ：

const onCheck = (keys: any, e: any) => {
    
    let arr = keys.concat(e.halfCheckedKeys)  
    setParamsList(arr) // Pass value to backend , It includes the semi selected parent nodes 
    setCheckedKeys(keys);
};

halfCheckedKeys： The parent node in semi selected status will be recorded

2） Echo rendering problems

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

const queryAuth = async (id: any) => {
    
    const list = await getAuthUser(id); // Get the list data through the interface 
    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 Choose ,1 Not selected 
          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));
};