Question

假设我必须验证OTP ... 1.我已经将axios .post（）请求写到某个路由，并且路由api生成OTP并将Otp成功发送到手机号码，为此我使用了npm的SendOtp包。 2.现在，我已经使用acxios的回调函数在调用组件中收到了该Otp值，并且已经将其存储在this.state对象中。 3.现在，我想验证用户键入otp时来自用户的otp。 4.因此，我创建了一个由单个输入类型和按钮进行验证的React组件。 5.我应该如何处理这种类型的路由和变量值传递，这样我应该能够验证OTP ...而无需将otp保存在数据库中

 //Front end code:

 axios.post('http://localhost:5000/register      /verifyotp', user)
   .then(profile => {
     console.log(profile.data.OTP)

     this.setState({
       otp: profile.data.OTP
     })
     console.log(this.state.otp)
   })
   .catch(error => {
     console.log(error)
   })

 //Backend code:

 router.route('/verifyotp').post((req, res) => {
   let mobi = req.body.Mobile;
   let ot = "934723"
   sendotp.send(mobi, "NDHome", ot, (error, data) => {
     if (!error) {
       console.log("Sent sucessfully " + data);

       res.json({
         OTP: ot
       }); //verifying otp

     } else {

       console.log(error)

     }
   })
 })

Answer 1

要在组件之间传递变量，请考虑使用redux（https://redux.js.org/introduction/getting-started）或对上下文进行响应（https://reactjs.org/docs/context.html）。

通常，一个组件中的状态变量/ const / let /等。不能传递给另一个，除非它通过对子组件的支持。例如，在这种情况下，假设“ AnotherComponent”是在OTP过程中覆盖mainComponent的模式，则可以像下面这样传递道具：

function mainComponent(props) {
 const [Otp, setOtp] = useState();
 useEffect(() => { // axios stuff here },[]);
 return <AnotherComponent verifyOtp={Otp} />
}

如何访问React.js中另一个组件的一个组件的状态变量或let，const，var变量？

1 个答案: