Question

在一个React项目中，我有一个名为Auth.jsx的组件，用于管理身份验证和路由。像这样：

let ComponentToShow;
let path="/";
let isSMSSent = false;

function Auth(){

       if(isSMSSent){
          let args = {
             onBackClick:handleBackClick,
           }
           path = "/receive";
           ComponentToShow = <CheckSMSCode args={args} />;
       else{
            let args = {
                onClick:handleSendSMSClick,
            }

            path = "/send";
            ComponentToShow = <SMSAuth args={args} />;

       }

       return(
        <Router>
        <Redirect to={path} />
          <Switch>

            <Route path="/send">
                {ComponentToShow}
            </Route>

            <Route path="/receive">
                {ComponentToShow}
            </Route>

          </Switch>
      </Router>
    );
}

现在，我要做的是，如果Auth.jsx组件中有错误，请在SMSAuth.jsx组件中显示错误消息。因为应用程序的大脑是Auth.jsx，所以我在这里处理错误，但是我想显示Im显示的每个组件内部的错误。实际上，我想更新另一个组件中的状态，并更新UI。

我在Google上进行了搜索，有人说Redux可以帮助您。但我不想使用Redux并坚持使用纯React。我该怎么做才能解决我的问题？使用Redux是强制性的，我对此有误吗？

林对此的想法是通过道具连接两个组件并创建对主要组件的引用以使用资源，但是我不知道该怎么做。我知道使用React.context可以在组件之间具有共享值，但是更改共享值不会更改UI，因为状态没有更新。

Answer 1

您可以使用上下文，这是使用计数器的示例

const CounterContext = React.createContext();
const CounterProvider = ({ children }) => {
  const [count, setCount] = React.useState(0);
  const up = React.useCallback(
    () => setCount((count) => count + 1),
    []
  );
  const down = React.useCallback(
    () => setCount((count) => count - 1),
    []
  );
  return (
    <CounterContext.Provider
      value={{
        count,
        up,
        down,
      }}
    >
      {children}
    </CounterContext.Provider>
  );
};

const Counter = React.memo(function Counter() {
  const { up, down, count } = React.useContext(
    CounterContext
  );
  return (
    <div>
      <div>
        <button onClick={up}>+</button>
      </div>
      <div>{count}</div>
      <div>
        <button onClick={down}>-</button>
      </div>
    </div>
  );
});

const App = function () {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

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


<div id="root"></div>

您的组件可能不会重新呈现，因为您正在突变某些在任何React或Redux状态下都无法管理的值。计数器之所以有效，是因为计数来自React状态，并且在更改时不会发生变化。

Answer 2

也许使用这样的回调函数；

const [isSMSSent, setisSMSSent] = useState(false);

setSmsSent = (value) => {setisSMSSent(value)}

<CheckSMSCode args={args} setSmsSent={setSmsSent} />

从React中的另一个组件更新组件的状态

2 个答案: