错误地使用 React 的五种方式，会导致你被解雇|useState
虽然是一个简单的工具，但 useState 许多开发人员仍然会犯错误。在代码审查期间，我经常看到即使是有经验的人也会犯这些错误。在本文中，我将通过简单实用的示例向您展示如何避免它们。
错误地获取以前的值
使用 setState 时，可以将以前的状态作为回调的参数进行访问。不使用它可能会导致意外的状态更新。我们将用一个典型的反例来分解这个错误。
import { useCallback, useState } from "react";
export default function App() {
const [counter, setCounter] = useState(0);
const handleIncrement = useCallback(() => {
setCounter(counter + 1);
}, [counter]);
const handleDelayedIncrement = useCallback(() => {
// counter + 1 is the problem,
// because the counter can be already different, when callback invokes
setTimeout(() => setCounter(counter + 1), 1000);
}, [counter]);
return (
<div>
<h1>{`Counter is ${counter}`}</h1>
{/* This handler works just fine */}
<button onClick={handleIncrement}>Instant increment</button>
{/* Multi-clicking that handler causes unexpected states updates */}
<button onClick={handleDelayedIncrement}>Delayed increment</button>
</div>
);
}
现在让我们在设置状态时使用回调。请注意，它还将帮助我们从useCallback中删除不必要的依赖。请记住解决方案！这个问题在面试中经常被问到）
import { useCallback, useState } from "react";
export default function App() {
const [counter, setCounter] = useState(0);
const handleIncrement = useCallback(() => {
setCounter((prev) => prev + 1);
// Dependency removed!
}, []);
const handleDelayedIncrement = useCallback(() => {
// Using prev state helps us to avoid unexpected behaviour
setTimeout(() => setCounter((prev) => prev + 1), 1000);
// Dependency removed!
}, []);
return (
<div>
<h1>{`Counter is ${counter}`}</h1>
<button onClick={handleIncrement}>Instant increment</button>
<button onClick={handleDelayedIncrement}>Delayed increment</button>
</div>
);
}
存储全局状态使用状态
useState 仅适用于存储组件的本地状态。这可能包括输入值、切换标志等。全局状态属于整个应用，它不仅仅与一个特定组件相关。如果你的数据在多个页面或小部件中使用，请考虑将其置于全局状态（React Context、Redux、MobX 等）。
让我们来看看这个例子。这真的很简单，但让我们假设我们很快就会有一个更复杂的应用程序。因此，组件层次结构将非常深入，用户状态将在整个应用程序中使用。在这种情况下，我们应该将我们的状态划分到全局范围内，以便可以从应用程序的任何点轻松访问它（我们不必向下传递 props 20-40 级）。
import React, { useState } from "react";
// Passing props
function PageFirst(user) {
return user.name;
}
// Passing props
function PageSecond(user) {
return user.surname;
}
export default function App() {
// User state will be used all over the app. We should replace useState
const [user] = useState({ name: "Pavel", surname: "Pogosov" });
return (
<>
<PageFirst user={user} />
<PageSecond user={user} />
</>
);
}
与其在这里使用本地状态，我们应该首选全局状态。让我们使用 React 上下文重写该示例。
import React, { createContext, useContext, useMemo, useState } from "react";
// Created context
const UserContext = createContext();
// That component separates user context from app, so we don't pollute it
function UserContextProvider({ children }) {
const [name, setName] = useState("Pavel");
const [surname, setSurname] = useState("Pogosov");
// We want to remember value reference, otherwise we will have unnecessary rerenders
const value = useMemo(() => {
return {
name,
surname,
setName,
setSurname
};
}, [name, surname]);
return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}
function PageFirst() {
const { name } = useContext(UserContext);
return name;
}
function PageSecond() {
const { surname } = useContext(UserContext);
return surname;
}
export default function App() {
return (
<UserContextProvider>
<PageFirst />
<PageSecond />
</UserContextProvider>
);
}
忘记初始化状态
这可能会（并且可能会）在代码执行期间导致错误。您可能已经看到这种类型的错误，它被命名为“无法读取未定义的属性
import React, { useEffect, useState } from "react";
// Fetch users func. I don't handle error here, but you should always do it!
async function fetchUsers() {
const usersResponse = await fetch(
`https://jsonplaceholder.typicode.com/users`
);
const users = await usersResponse.json();
return users;
}
export default function App() {
// No initial state here, so users === undefined, until setUsers
const [users, setUsers] = useState();
useEffect(() => {
fetchUsers().then(setUsers);
}, []);
return (
<div>
{/* Error, can't read properties of undefined */}}
{users.map(({id, name, email}) => (
<div key={id}>
<h4>{name}</h4>
<h6>{email}</h6>
</div>
))}
</div>
);
纠正和犯错误一样容易！我们应该将状态设置为空数组。如果你想不出任何初始状态，你可以放置 null 并处理它。
import React, { useEffect, useState } from "react";
async function fetchUsers() {
const response = await fetch(
`https://jsonplaceholder.typicode.com/users`
);
const users = await response.json();
return users;
}
export default function App() {
// If it doesn't cause errors in your case, it's still a good tone to always initialize it (even with null)
const [users, setUsers] = useState([]);
useEffect(() => {
fetchUsers().then(setUsers);
}, []);
// You can also add that check
// if (users.length === 0) return <Loading />
return (
<div>
{users.map(({id, name, email}) => (
<div key={id}>
<h4>{name}</h4>
<h6>{email}</h6>
</div>
))}
</div>
);
}
改变状态而不是返回新状态
你这辈子都不能变异 React 状态！当状态发生变化时，React 会做很多聪明而重要的事情，并且它是根据浅层比较（通过引用而不是值进行比较）来做的。
import { useCallback, useState } from "react";
export default function App() {
// Initialize State
const [userInfo, setUserInfo] = useState({
name: "Pavel",
surname: "Pogosov"
});
// field is either name or surname
const handleChangeInfo = useCallback((field) => {
// e is input onChange event
return (e) => {
setUserInfo((prev) => {
// Here we are mutating prev state.
// That simply won't work as React doesn't recognise the change
prev[field] = e.target.value;
return prev;
});
};
}, []);
return (
<div>
<h2>{`Name = ${userInfo.name}`}</h2>
<h2>{`Surname = ${userInfo.surname}`}</h2>
<input value={userInfo.name} onChange={handleChangeInfo("name")} />
<input value={userInfo.surname} onChange={handleChangeInfo("surname")} />
</div>
);
}
解决方案非常简单。我们应该避免改变状态，而简单地返回一个新状态。
具体解决代码，请戳👉：
