React中使用useEffect获取的数据不为数组、过滤结果异常问题

• fetch数据处理逻辑错误：你在fetch回调中已经执行response.json()将响应解析为JS对象，第二个then回调接收的参数就是已经解析完成的对象，此时你再次调用response.json.Items属于非法操作，会直接返回undefined，导致setRows实际存储的不是预期数组，而是undefined或其他非数组类型的值。
• 过滤用的Effect钩子拼写错误：你写的useEffects多了一个后缀s，React不会执行这个错误命名钩子的回调，过滤逻辑从一开始就没有按预期触发。
• Effect依赖项配置错误：过滤逻辑的Effect依赖是xyz而非rows，即使钩子拼写正确，也只有xyz变化时才会执行，你拉取数据更新rows时不会触发过滤逻辑，拿到的永远是初始空数组的过滤结果。
• typeof判断数组的认知误区：JS语言层面typeof []的返回值本身就是object，这是语言的固有设计，不能用typeof判断是否为数组，应该用Array.isArray(rows)来检测。

1. 修正fetch数据处理逻辑

let [rows, setRows] = useState([]);

useEffect(()=>{
  console.log('use effect for first time')
  const url = "https://somepath.com/fff";
  fetch(url)
    .then(response => response.json())
    // 直接取解析后对象的Items字段，不要二次调用json()
    .then(data => setRows(data.Items))
},[])

2. 修正过滤逻辑的钩子拼写和依赖项

// 修正为useEffect，依赖项改为rows，保证rows更新时自动触发过滤
useEffect(()=>{
  // 过滤前先判断rows是不是数组，避免调用filter时报错
  if (!Array.isArray(rows)) return
  const result = rows.filter(e=> e.skills.includes('JavaScript'));
  console.log(result);
},[rows])

内容的提问来源于stack exchange，提问作者creativated