如何使用react中的函数将json数据从一个组件传递到另一个组件

Question

如何将数据从一个组件传递到另一个组件?

例如，如果有人点击忘记密码，它提示他输入一个电子邮件，然后它发送一个post请求来确认用户是否存在。
如果用户确实存在，它将返回安全问题作为响应，然后它应该将用户与我们从前一个组件获得的安全问题一起带到另一个屏幕，并在那里显示该屏幕并要求用户为它回答问题。

下面是我的代码:

import React, { Fragment, useState } from 'react';
import ForgetPassword from './ForgetPassword';
import { useHistory } from 'react-router-dom';
const VerifyUser = ({ setAuth }) => {
let [parseData, setParseData] = useState('');
// let [con1, setcon1] = useState(false);
const [inputs, setInputs] = useState({
email: '',
});
const onChange = (e) => {
setInputs({ ...inputs, [e.target.name]: e.target.value });
};
const onSubmitForm = async (e) => {
try {
e.preventDefault();
const body = { email };
const bodyFile = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
};
const response = await fetch(
'http://localhost:5000/forgetpassword/verifyuser',
bodyFile
);
const parseRes = await response.json();
setParseData(parseRes);
} catch (err) {
console.error(err.message);
}
};
const { email } = inputs;
return (
<Fragment>
<div className='wrapper fadeInDown formAdjustmentLoginPage'>
<div id='formContent'>
<div className='fadeIn first'></div>
<form className='formFunctions' onSubmit={onSubmitForm}>
<input
type='email'
id='email'
className='fadeIn second'
name='email'
placeholder='Email'
value={email}
onChange={(e) => onChange(e)}
/>
<button type='submit' className='fadeIn fourth'>
Submit
</button>
<h1>{parseData}</h1> //I want to pass this to another component.
</form>
</div>
</div>
</Fragment>
);
};
export default VerifyUser;

Answer 1

有几种方法可以做到这一点。

让我们看看最简单的一个——state/props drilling。

假设你有两个成分-A和B，在这样的关系中，A是B的父级。

如果要将数据从A传递到B，只需通过props传递即可。如果你想从BA然而传递数据,你需要通过set method属性,然后从B设置状态称之为set methodA:

const A = props => {
const [data, setData] = useState({})
return <B setData={setData} />
}
const B = props => {
return (<button onClick={props.setData("Data")}>Set Data!</button>)
}

如果你有一个更复杂的结构，你试着找到最接近的共同父元素(A和B的父元素)。然而，这只是到目前为止，在某些时候，它变得不可能维护和昂贵的执行，所以您将需要应用某种global state management工具。Redux是最流行的选择，但Context API更容易学习。