react相关报错解决

1. 渲染一个数组的时候，如果直接渲染会报错说我们缺少key
   Each child in a list should have a unique "key" prop
   解决方法：对数组遍历克隆每一个元素，给每个元素加一个key

<Dialog buttons={
        [
          <Button type="primary" size="mini" onClick={() => setX(false)}>ok</Button>,
          <Button size="mini" onClick={() => setX(false)}>cancel</Button>
        ]
      }>
        小改改！
</Dialog>

使用

<div>
{props.buttons.map((button, index) => {
     return React.cloneElement(button, {key: index})
})}
</div>

2. 如果我们要在在一个函数的参数里调用这个函数的返回结果，这时候我们如果直接写的话，会说我们不能在声明前使用

const x = (a) => {
  const fn = () => {}
  return fn
}
const y = x(<button onClick={y}>会报错</button>)

解决方法通过你个箭头函数延迟获取y

const y = x(<button onClick={() => y()}>会报错</button>)

3. 不能直接在 map 里使用 useState，可以把map里的内容单独封装一个组件，在这个组件顶层使用 useState

上面的代码直接在map里使用了 useState，这样一旦你对数组数据进行 添加或者删除，每次的索引对应不上就会报错，所以把map里的内容单独拿出来

4. 报错：Objects are not valid as a React child ... If you meant to render a collection of children, use an array instead.
   这种问题的原因是我们把一个普通的对象作为了React 的子元素，引起这种问题的原因可能是我们使用 JSON.parse(JSON.stringify(menus)) 深拷贝的原因，它会把我们的 Dom 对象拷贝成普通对象，如果非要深拷贝我们可以使用 loadash
   以下面的 Tree 组件为例

const handleTree = (
  treeData: any[],
  titleName: string = 'name',
  valueName: string = 'dept_id',
) => {
  treeData.forEach((item: any) => {
    item.title = <span style={{color: item.isSensitive === 1 ? 'red' : 'rgba(0, 0, 0, 0.65)'}}>{item[titleName] || item.ding_name || item.label}</span>;
    item.value = item[valueName] || item.ding_id || item.value;
    item.key = item[valueName] || item.ding_id || item.value;

    if (item.particle) {
      item.children = item.particle;
    }

    const new_data = [...(item.user || []), ...(item.children || [])];
    item.children = new_data;
    handleTree(item.children, titleName, valueName);
  });
};

 <Tree
          treeData={getShowList(treeData, value)}
          expandedKeys={expandedValueKeys}
          onExpand={setExpandedValueKeys}
          selectable={false}
          defaultExpandAll
        />

export function getShowList(menus: TreeNodeNormal[], keys: string[]) {
  const fibJudge = (item: TreeNodeNormal): boolean => {
    const { children = [] } = item;
    if (children.length) {
      return children.some(sub => fibJudge(sub)) || keys?.indexOf(`${item.key}`) > -1;
    }
    return keys?.indexOf(`${item.key}`) > -1;
  };
  const fibArr = (arrs: TreeNodeNormal[]) => {
    const filteredArr: TreeNodeNormal[] = [...arrs].filter(item => fibJudge(item));
    return filteredArr?.map((item: TreeNodeNormal) => {
      if (item?.children?.length) {
        item.children = fibArr(item?.children || []);
      }
      return item;
    });
  };
  return fibArr(cloneDeep(menus));
}

我们原来的 title 是一个 react element，但如果我们用JOSN深拷贝它就会变成下面的普通对象