Блог

Главная - Вопросы по программированию - Получите значение из ответа и перенесите его в другой компонент в React

Получите значение из ответа и перенесите его в другой компонент в React

#javascript #reactjs #api #react-hooks

Вопрос:

У меня есть эта подложка, которая возвращает мне ключ (верифицированный код), который я должен использовать в другом компоненте. Как я могу передать этот код проверки другому компоненту?

 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 .

Это представление, в котором загружаются компоненты, это пошаговое представление, один загружается за другим, мне нужно получить код проверки const в подтверждении формы

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

Кто-нибудь знает, как я могу это сделать?

Комментарии:

1. Вам нужно будет сохранить какое-то состояние на более высоком уровне (либо общее родительское, либо глобальное), и оно установит его там. Где по отношению к этому находится другой компонент?

Ответ №1:

Вам нужно переместить состояние вверх к компоненту, который имеет как дочерние элементы, а затем передать функцию, которая обновляется как опора

 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>;

Ознакомьтесь с документами здесь

Для более сложных структур компонентов или там, где вы проходите много уровней, вы, возможно, захотите изучить 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>;
 };
Метки: