React 面试中的 4 大错误

以下是 React 面试中常见的四个错误。有时，面试的压力会让我们犯一些愚蠢的错误。希望在下次面试前回顾这篇文章能有所帮助。

1.地图

当我们必须渲染项目列表时，我们可以在 JSX 中使用 map。

<>
  {list.map((item) => {
    return <p key={item.id}>{item.name}</p>
  })
</>

我们也可以使用这种缩短的语法，这样我们就可以省略返回。

<>
  {list.map((item) => (
    <p key={item.id}>{item.name}</p>
  ))
</>

然而，许多候选人忘记返回地图内部，并对列表无法呈现感到沮丧。

<>
  {list.map((item) => {
    <p key={item.id}>{item.name}</p>  // need to return here
  })
</>

有时在采访中很难发现这个拼写错误。

2. 更新数组和对象

每当我们修改一个作为 React 状态存储的数组或对象时，我们都必须创建一个新的实例。直接修改状态会引发错误。

我感觉这部分应该完全从开发者那里抽象出来，这样我们就可以修改数组了。我做了一个关于如何在 React 中更新数组和对象的速查表：https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np

3. 拨打网络电话

在面试过程中，fetch API 是一个比较棘手的 API，尤其是当我们习惯使用不同的库时。

有时，我们需要快速获取 API，这时使用第三方库似乎有些愚蠢。记住，fetch 返回的是其响应的 promise，我们必须将其转换为 JSON 才能读取。

const res = await fetch("https://someurl.com");
const json = await res.json();

为了在组件加载时发出请求，我们可以执行以下操作：

const SomeComponent = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("https://someurl.com");
      const json = await res.json();
      setList(json);
    };
    fetchData();
  }, []);

  return (
    <>
      {list.map((item) => {
        return <p key={item.id}>{item.name}</p>
      })
    </>
  );
}

获取 a 内部的数据useEffect并更新我们想要迭代的状态。await不能直接在 a 内部使用，useEffect所以我们必须先创建一个异步函数，然后调用它。

4. 点击列表项

有时我们需要渲染一个列表项，并改变父元素的状态。例如，假设我们有一个待办事项列表。当我们点击其中一个待办事项时，我们需要更新父元素的状态。

有时候选人会对何时发生的情况感到困惑onClick。我们如何知道点击了哪个项目？

<>
  {list.map((item) => {
    return (
      <button
        key={item.id}
        onClick={onItemClick}
      >
        {item.name}
      </button>
    );
  })
</>

我们通过将项目传递给点击处理程序来实现这一点：

<>
  {list.map((item) => {
    return (
      <button
        key={item.id}
        onClick={() => onItemClick(item)}
      >
        {item.name}
      </button>
    );
  })
</>

文章来源：https://dev.to/andyrewlee/top-4-mistakes-in-react-interviews-b4i