Update 97.精读《编写有弹性的组件》.md

fix typo

97.精读《编写有弹性的组件》.md

@@ -101,8 +101,8 @@ function SearchResults({ query }) {
   const [data, setData] = useState(null);
   const [currentPage, setCurrentPage] = useState(0);
 
-  const fetchResults = useCallback(() => {
-    return "http://myapi/results?query" + query + "&page=" + currentPage;
+  const getFetchUrl = useCallback(() => {
+    return "http://myapi/results?query=" + query + "&page=" + currentPage;
   }, [currentPage, query]);
 
   useEffect(() => {
@@ -114,7 +114,7 @@ function SearchResults({ query }) {
 }
 ```
 
-Function Component 对 `props` 与 `state` 的数据都一视同仁，且可以将取数逻辑与 “更新判断” 通过 `useCallback` 完全封装在一个函数内，再将这个函数作为整体依赖项添加到 `useEffect`，如果未来再新增一个参数，只要修改 `fetchResults` 这个函数即可，而且还可以通过 `eslint-plugin-react-hooks` 插件静态分析是否遗漏了依赖项。
+Function Component 对 `props` 与 `state` 的数据都一视同仁，且可以将取数逻辑与 “更新判断” 通过 `useCallback` 完全封装在一个函数内，再将这个函数作为整体依赖项添加到 `useEffect`，如果未来再新增一个参数，只要修改 `getFetchUrl` 这个函数即可，而且还可以通过 `eslint-plugin-react-hooks` 插件静态分析是否遗漏了依赖项。
 
 Function Component 不但将依赖项聚合起来，还解决了 Class Component 分散在多处生命周期的函数判断，引发的无法静态分析依赖的问题。
 
@@ -409,7 +409,7 @@ const App = memo(function App() {
   const [state, dispatch] = useReducer(appReducer, new State())
 
   return (
-    <AppDispatch.Provider value={dispaych}>
+    <AppDispatch.Provider value={dispatch}>
       <Count count={count}/>
       <Name name={name}/>
     </AppDispatch.Provider>