React Hooks:父组件在子组件中调用调用时未更新

Question

我一直在遵循一个指南，将简化器传递给带有usecontext的儿童组件，但是当从子组件中派遣时，它似乎并没有重新启用父组件。<<<<<<<。/p>

从子组件派遣时，状态本身似乎正在正确更新(如Console.Logging state.Count(，但父组件并未反映状态的变化。

我已经尝试将调度函数作为对孩子的道具的传递，这确实更新了app.js，但是我认为我的方法更干净，而我可能做错了。我还将 {state.count}放在child.js中，并且确实正确更新了，但是在这种情况下，我需要在父组件中。这是代码：

app.js

import React, { useReducer } from 'react';
import { StateProvider } from './reducer';
import Child from './Child'
function App() {
    const reducer = (state, action) => {
        switch (action.type) {
            case 'add':
                console.log(state.count+1)
                return {...state, count: state.count + 1}
            default:
                throw new Error();
        }
    }
    const initialState = {count: 1};
    const [state, dispatch] = useReducer(reducer, initialState)
    return (
        <StateProvider initialState={initialState} reducer={reducer}>
            <div className="App">
                {state.count}
                <Child></Child>
            </div>
        </StateProvider>
  );
}
export default App;

reducer.js

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext(null);
export const StateProvider = ({reducer, initialState, children}) => (
    <StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

child.js

import React from 'react';
import { useStateValue } from './reducer';
export default function Child(props) {
    const [state, dispatch] = useStateValue();
    return (
        <button onClick={() => dispatch({type: 'add'})}>Increment</button>
    )
}

Answer 1

那是因为您在StateProvider中重新创建reducer：

<StateContext.Provider value={useReducer(reducer, initialState)}>

相反，只需通过实际的还原器的dispatch向下：

<StateProvider initialState={initialState} reducer={{dispatch}}> 

然后使用它：

const StateProvider = ({reducer, initialState, children}) => (
    <StateContext.Provider value={reducer}>
        {children}
    </StateContext.Provider>
);

顺便说一句，我认为您可以在组件之外声明还原器逻辑函数，因此无缘无故地在App的每个渲染上都不会重新启动它。

这是一个运行示例：

// mimic imports
const {createContext, useContext, useReducer} = React;
const StateContext = createContext(null);
const StateProvider = ({reducer, initialState, children}) => (
    <StateContext.Provider value={reducer}>
        {children}
    </StateContext.Provider>
);
const useStateValue = () => useContext(StateContext);
function Child(props) {
  const {dispatch} = useStateValue(StateContext);
  return (
      <button onClick={() => dispatch({type: 'add'})}>Increment</button>
  )
}
const reducer = (state, action) => {
  switch (action.type) {
      case 'add':
          console.log(state.count+1)
          return {...state, count: state.count + 1}
      default:
          throw new Error();
  }
}
function App() {
    const initialState = {count: 1};
    const [state, dispatch] = useReducer(reducer, initialState)
    return (
        <StateProvider initialState={initialState} reducer={{dispatch}}>
            <div className="App">
                {state.count}
                <Child></Child>
            </div>
        </StateProvider>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>