解构失败报错

解构赋值的规则是：将等号右边的值（装箱）转化成对象。但是undefined和null不能转为对象，所以报错

bad:

const handleData = (props)=>{
    const { user } = props;
    const { id,name } = user;
}  
handleData({ user:null })

const handleData = (props)=>{
    const { user = {} } = props;
    const { id,name } = user || {};
}  
handleData({user:null})

good：

const handleData = (props)=>{
    const { user } = props;
    const { id,name } = user || {};
}  
handleData({ user:null })

数组方法调用报错

接口的值直接当数组用： bad:

const handleData = (props)=>{
    const { userList } = props;
    const newList = userList.map((item)=>item.name);
}  
handleData({ userList:null })

good：

const handleData = (props)=>{
    const { userList } = props;
    if(Array.isArray(userList)){
        const newList = userList.map((item)=>item.name);
    }
}  
handleData({ userList:null })

但是按我的工作经验来看，还有更好的：

best:

const handleData = (props) => {
  const { userList } = props;
  const newList = userList?.map((item) => item.name) || [];
  console.log(newList);
};

handleData({ userList: null }); // 输出: []
handleData({ userList: [{ name: 'Alice' }, { name: 'Bob' }] }); // 输出: ['Alice', 'Bob']

遍历对象数组报错

good: map遍历时使用?. 可选链操作符

const handleData = (props) => {
  const { userList } = props;
  const newList = userList?.map((item) => item?.name) || [];
  console.log(newList);
};

如果要返回模版字符串，应该使用return

const handleData = (props) => {
  const { userList } = props;
  const newList = userList?.map((item) => {
    const { id, name, age } = item || {};
    return `id: ${id}, name:${name} age:${age}`
  }) || [];
};

自动类型转化

string => String
number => Number
boolean => Boolean
symbol => Symbol
bigint => Bigint

null => 
undefined =>

使用对象方法报错

const obj = {
  name: 'Alice',
  age: 25,
  city: 'Wonderland'
};

const entries = Object.entries(obj);
console.log(entries);
// 输出: [['name', 'Alice'], ['age', 25], ['city', 'Wonderland']]

good: 使用{}兜底；

const handleData = (props) => {
  const { userList } = props;
  const newList =  Object.entries(userList || {})// Object.entries(obj) 返回一个数组，其中包含对象自身可枚举属性的键值对数组。
  console.log(newList);
};

async/await 报错未捕获

bad: await如果报错，会一直在加载中；

const List = () =>{
    const [loading, setLoading] = useState(false);
    const getData = async () => {
        setLoading(true);
        const res = await fetchData();
        setLoading(false);
    }
}

good：catch捕获一下报错

const List = () =>{
    const [loading, setLoading] = useState(false);
    const getData = async () => {
        setLoading(true);
        try{
            const res = await fetchData();
            setLoading(false);
        } catch (error) {
            setLoading(false);
        }

    }
}

JSON.parse() await import

good:

const handleData=(props)=>{
    const { userStr } = props;
    try {
        const user = JSON.parse(userStr);
    }catch(error){
        console.error('字符串无效')
    }
}

const handleData=(props)=>{
    const { userStr } = props;
    try {
        const user = await import('...')
        console.error('字符串无效')
    }
}

setTimeout定时器未清楚

useEffect在生命周期中清楚即可；