从响应中获取值并转移到 React 中的另一个组件

Posted 2023-02-22

【中文标题】从响应中获取值并转移到 React 中的另一个组件

【英文标题】：Get value from response and transfer to another component in React

【发布时间】：2021-09-14 16:56:21

【问题描述】：

我有这个handleSubmit，它返回一个我应该在另一个组件中使用的密钥（verifyCode）。如何将此 verifyCode 传递给另一个组件？

const SendForm = ( someValues ) => 

      const handleSubmitAccount = () => 
        dispatch(createAccount(id, username))
        
          .then((response) => 
            // I get this value from data.response, its works
            const  verifyCode  = response;
          )
          .catch(() => 
          );
      ;

      return(
         //the form with handleSubmitAccount()
       )


export default SendForm;

另一个组件不是子组件，它是在这个提交步骤之后加载的。但是不知道怎么转const verifyCode。

这是加载组件的视图，是一步一步的视图，一个接一个地加载，我需要在FormConfirmation中获取const verifyCode

<SendForm onSubmit=handleStepSubmit onFieldSubmit=handleFieldSubmit />
<FormConfirmation onSubmit=handleStepSubmit onFieldSubmit=handleFieldSubmit />

有人知道我该怎么做吗？

【问题讨论】：

您必须将某些状态保持在更高级别（共享父级或全局）并将其设置在那里。与此相关的其他组件在哪里？

【参考方案1】：

您需要将状态向上移动到具有两个子级的组件，然后传递一个更新为 prop 的函数

import React from "react";

export default function App() 
    const [value, setValue] = React.useState(0);
        return (
            <div className="App">
                <Updater onClick=() => setValue(value + 1) />
                <ValueDisplay number=value />
           </div>
       );


 const Updater = (props) => <div onClick=props.onClick>Update State</div>;
 const ValueDisplay = (props) => <div>props.number</div>;

查看docs here

对于更复杂的组件结构或您传递多个级别的位置，您可能需要查看reactContext

import React from "react";

//Set Default Context
const valueContext = React.createContext( value: 0, setValue: undefined );

export default function App() 
    const [value, setValue] = React.useState(0);
        return (
           <div className="App">
              /** Pass in state and setter as value */
              <valueContext.Provider value= value: value, setValue >
                  <Updater />
                  <ValueDisplay />
              </valueContext.Provider>
         </div>
    );


const Updater = () => 
     /** Access context with hook */
     const context = React.useContext(valueContext);
     return (
         <div onClick=() => context.setValue(context.value + 1)>Update State</div>
     );
;
 const ValueDisplay = () => 
     /** Access context with hook */
     const context = React.useContext(valueContext);
      return <div>context?.value</div>;
 ;