Question

WebContext.js

New-Object : Cannot find type [Microsoft.SqlServer.Management.IntegrationServices.IntegrationServices]: verify that the assembly containing this type is loaded.
nServices = New-Object $SSISNamespace".IntegrationServices" $sqlConne ...
+                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidType: (:) [New-Object], PSArgumentException
    + FullyQualifiedErrorId : TypeNotFound,Microsoft.PowerShell.Commands.NewObjectCommand

App.js

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return <WebContext.Provider value={{ ...this.state }}>{this.props.children}</WebContext.Provider>;
    }
}

export default WebContextProvider;

UpdateBtn.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

如何更新 WebContext.js 中出现的 inputAmount 状态，方法是单击 UpdateBtn.js 中的按钮？ App.js 是 UpdateBtn.js 的父组件。此外，如何将 WebContext.js 转换为功能组件？

Answer 1

您应该在Provider中传递函数，可以调用该函数来更新值： WebContext.js

$tagsFiltered;

App.js


import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return (
            <WebContext.Provider
                value={{
                    data: ...this.state, // all data now in context.data field
                    update: () => { // we added this callback
                        this.setState((state) => ({
                            inputAmount: state.inputAmount + 1,
                        }));
                    },
                }}
            >
                {this.props.children}
            </WebContext.Provider>
        );
    }
}

export default WebContextProvider;

UpdateBtn.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

或

const UpdateBtn = () => {
const context = useContext(WebContext); // we use hook to get context value
return (
        <Div>
            <Button onClick={context.update} /> 
        </Div>
    );
};

export default UpdateBtn;

Answer 2

另一种方法可能是使用reducer更新您的状态。例如：

export const initialState = {
  inputValue: 1
}

export function reducer(state, action) {
  const { type, payload } = action;
  switch (type) {
    case 'updateInputValue': {
      return { ...state, inputValue: payload };
    }
    default: return state;
  }
}

将它们导入到您的提供程序文件中

import { initialState, reducer } from './reducer';

并使用useReducer创建商店：

export function WebContextProvider({ children }) {
  const store = useReducer(reducer, initialState);
  return (
    <WebContext.Provider value={store}>
      {children}
    </WebContext.Provider>
  );
}

然后，您可以将上下文导入到需要它的组件中，并使用useContext来获取状态和调度方法。单击按钮后，您可以向商店分配新值以更新inputValue。

export default function UpdateButton() {

  const [ { inputValue }, dispatch ] = useContext(WebContext);

  function handleClick(e) {
    dispatch({
      type: 'updateInputValue',
      payload: inputValue + 1
    });
  }

  return (
    <div>
      <div>{inputValue}</div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

我创建了a full demo，向您展示了它是如何协调工作的。

单击按钮时如何更新反应上下文提供程序状态

2 个答案: