React常见错误及处理（一）

1. Objects are not valid as a React child / Functions are not valid as a React child

渲染的单条数据为对象

在 React 中，我们可以在组件中渲染到 DOM 中的东西有很多，比如：HTML标签、JSX元素、原始 JavaScript 值、JavaScript 表达式等。但是不能将对象和函数渲染到 DOM 中，因为这两个值不会解析为有意义的值，如果渲染了对象或函数，就会报上面的错误。

2. Warning: Each child in a list should have a unique key prop

渲染列表时不使用 key

React 开发中最常见的就是遍历数组来渲染组件。在JSX中，可以使用Array.map将该逻辑嵌入到组件中，并在回调中返回所需的组件。如下：

const arr = [
  { id: 1, text: "JavaScript" },
  { id: 2, text: "TypeScript" },
  { id: 3, text: "React" }
];

export default function App() {
  return (
    <div>
      {arr.map((content) => (
        <div>
          {content.text}
        </div>
      ))}
    </div>
  );
}

这样会收到如下警告：Warning: Each child in a list should have a unique key prop，这表示需要给生成的每个组件一个唯一的key。所以，要在map回调返回的JSX的最外层元素添加一个key值，该值应该是一个字符串或者数字，并且在这个组件列表中应该是唯一的。

export default function App() {
  return (
    <div>
      {arr.map((content) => (
        <div key={content.id}>
          {content.text}
        </div>
      ))}
    </div>
  );
}

尽管不遵守这个要求也不会导致应用崩溃，但它可能会导致一些意外的情况。React 会使用这些key来确定列表中的哪些子项发生了更改，并使用此信息来确定可以重用先前 DOM 的哪些部分，以及在重新渲染组件时应该重新计算哪些部分。 因此，建议添加 key。

3. Can’t perform a React state update on an unmounted component

组件卸载后执行状态更新

这个报错就是因为在组件树的某个地方，状态更新被触发到已经卸载的组件上了。也就是说，我们不能在组件销毁后设置 state，防止出现内存泄漏。

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchAsyncData().then((data) => setData(data));
  }, []);

  // ...
};

比如，在请求数据时，由于跳转到了B页面，A页面的数据请求还在进行中，但是页面已经销毁了，就会出现这种情况。那该如何解决这个问题呢？我们可以在组件卸载时取消异步请求。

一些异步请求库提供了取消异步请求的方法。如果没有使用第三方库，可以使用 AbortController 来取消。这种方法本质上就是在组件卸载时取消副作用：

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal }).then((data) => setData(data));
    return () => {
      controller.abort();
    }
  }, []);

  // ...
};

4. React Hook “useXXX” is called conditionally. React Hooks must be called in the exact same order in every component render

Hooks 调用顺序错误

先来看下面的代码：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);

  if (isOpen) {
    return <div>{/* ... */}</div>;
  }
  const openToggle = useCallback(() => setIsOpen(true), []);
  return <button onClick={openToggle}>{/* ... */}</button>;
};

当 isOpen 的值为true时，就会直接return那个div元素。这样当isOpen的值为true和false时useCallback Hook的调用顺序就不一致了。这时React就会警告我们：React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render。这其实就是React官方文档中所说的，不要在循环，条件或嵌套函数中调用 Hook， 确保总是在 React 函数的最顶层以及任何 **return** 之前调用他们。遵守这条规则才能确保 Hook 在每一次渲染中都按照同样的顺序被调用。

可以这样来修改上面的代码：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openToggle = useCallback(() => setIsOpen(true), []);

  if (isOpen) {
    return <div>{/* ... */}</div>;
  }
  return <button onClick={openToggle}>{/* ... */}</button>;
};