React 少见错误怎么解决？一条条来解决！

2023-06-14 23:34:40

React 报错指南：告别头痛

对于 React 开发人员来说，报错是家常便饭。那些晦涩难懂的错误信息往往让人抓狂，仿佛陷入了死胡同。但别担心，这份指南将为您一一解读 React 中最常见的报错，并提供详细的解决方案。

TypeError: Cannot read properties of undefined

这种错误通常出现在您试图访问不存在的属性时。例如：

const user = undefined;
console.log(user.name); // TypeError: Cannot read properties of undefined

解决方案： 在访问属性之前检查对象是否存在。

if (user) {
  console.log(user.name);
}

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

此错误表明您在函数组件之外使用了 Hook。Hook 只能在函数组件中使用。

解决方案： 将 Hook 移动到函数组件内部。

// 错误：
const MyComponent = () => {
  useEffect(() => {}, []); // Invalid hook call
};

// 正确：
const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {}, []); // Valid hook call
};

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

此错误意味着您试图创建一个无效的 React 元素。React 元素可以是字符串、类组件或函数组件。

解决方案： 确保您传递正确的类型。

// 错误：
const MyComponent = () => {
  return { name: "John" }; // Invalid React element
};

// 正确：
const MyComponent = () => {
  return <div>Hello, John!</div>; // Valid React element
};

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

此错误表明您在 React 18 中使用了过时的 ReactDOM.render() 方法。

解决方案： 使用 createRoot() 方法替换 ReactDOM.render()。

// 错误：
ReactDOM.render(<App />, document.getElementById("root"));

// 正确：
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Warning: The above error occurred in the component.

此错误表明您使用了未知组件。

解决方案： 检查您的代码，确保组件已正确导入并注册。

// 错误：
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />; // Error: Unknown component
};

// 正确：
import MyComponent from "./MyComponent.js"; // Add .js extension

const App = () => {
  return <MyComponent />; // Valid component
};

Warning: Failed prop type: Invalid prop children of type string supplied to MyComponent, expected array.

此错误表明您传递了错误类型的属性。

解决方案： 检查您的组件定义，确保属性类型与您传递的值匹配。

// 错误：
const MyComponent = (props) => {
  return <div>{props.children}</div>; // Expects an array
};

const App = () => {
  return <MyComponent children="Hello" />; // Invalid prop type
};

// 正确：
const MyComponent = (props) => {
  return <div>{props.children}</div>; // Expects an array
};

const App = () => {
  return <MyComponent children={["Hello", "World"]} />; // Valid prop type
};

Warning: Can't perform a React state update on an unmounted component.

此错误表明您试图更新一个已卸载的组件的状态。

解决方案： 在组件卸载之前取消所有状态更新。

class MyComponent extends React.Component {
  componentWillUnmount() {
    this.setState({ count: 0 }); // Error: Can't perform state update on unmounted component
  }
}

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

此错误表明您的组件无限重新渲染。

解决方案： 检查您的组件，确保不存在循环依赖关系。

// 错误：
const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1); // Creates an infinite loop
  }, [count]);
};

// 正确：
const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count < 10) {
      setCount(count + 1); // Limits the number of re-renders
    }
  }, [count]);
};