从响应中获取价值并转移到 React 中的另一个组件 [英] Get value from response and transfer to another component in React

问题描述

我有这个 handleSubmit，它返回一个我应该在另一个组件中使用的密钥 (verifyCode).如何将此 verifyCode 传递给另一个组件?

const SendForm = ({ someValues }) =>{const handleSubmitAccount = () =>{调度(创建帐户(ID，用户名)).then((响应) => {//我从 data.response 得到这个值，它的工作原理const { verifyCode } = 响应；}).catch(() => {});};返回(//带有handleSubmitAccount()的表单)}导出默认的 SendForm；

另一个组件不是子组件，它是在这个提交步骤之后加载的.但是我不知道如何传递const verifyCode.

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

<FormConfirmation onSubmit={handleStepSubmit} onFieldSubmit={handleFieldSubmit}/>

有人知道我该怎么做吗?

解决方案

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

从反应"导入反应；导出默认函数 App() {const [value, setValue] = React.useState(0);返回 (
<更新程序 onClick={() =>setValue(value + 1)}/><ValueDisplay number={value}/>
);}const Updater = (props) =><div onClick={props.onClick}>更新状态</div>;const ValueDisplay = (props) =><div>{props.number}</div>;

在此处查看文档

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

从反应"导入反应；//设置默认上下文const valueContext = React.createContext({ value: 0, setValue: undefined });导出默认函数 App() {const [value, setValue] = React.useState(0);返回 (
{/** 传入 state 和 setter 作为值 */}<valueContext.Provider value={{ value: value, setValue }}><更新程序/><值显示/></valueContext.Provider>
);}const 更新程序 = () =>{/** 使用钩子访问上下文 */const context = React.useContext(valueContext);返回 (<div onClick={() =>context.setValue(context.value + 1)}>更新状态

);};const ValueDisplay = () =>{/** 使用钩子访问上下文 */const context = React.useContext(valueContext);返回<div>{context?.value}</div>;};

I have this handleSubmit that returns me a key (verifyCode) that I should use in another component. How can I pass this verifyCode to another component?

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;

The other component is not a child component, it is loaded after this submit step. But I don't know how to transfer the const verifyCode.

This is the view where the components are loaded, it's a step view, one is loaded after the other, I need to get the const verifyCode in FormConfirmation

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

Does anyone know how I can do this?

解决方案

You need to move up the state to a component that has both as children and then pass down a function that updates as a 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>;

Check out the docs here

For more complex component structures or where your passing down many levels you may want to look into 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>;
 };

这篇关于从响应中获取价值并转移到 React 中的另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！