我把API的值从子组件拿到axios，以toParentUser的形式交给父组件，在父组件中，这个值是userInvalid，在console中可以很好的查到，但是如果我想把这个值作为父组件中的变量使用，但是我尝试着把它作为变量使用，出现错误 userInvalid is not defined no-undef。如何在父组件中使用此值？如果您能告诉我，我将不胜感激，谢谢

注册用户输入：

这是子组件。我通过axios接收值，并将userData.data.isSuccess传递给父组件。

import React, { useEffect, useState } from 'react'
import styled from 'styled-components';
import axios from 'axios';

const InputWrap = styled.div`
  align-items: center;
  -webkit-appearance: none;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
  box-sizing: border-box;
`

function SignUpUserInput({userName,setUserName,toParentUser}) {

//validation check
useEffect (()=> {
  async function fetchData () {
    try{
      const userData = await axios({
        method : 'get',
        url : `https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/checkid?id=${userName}`
      });

      toParentUser(userData.data.isSuccess)
    }

    catch(error) {
      alert(error);
    }
  }
  fetchData();
},[userName])

  const [isUserName, setIsUserName] = useState(true);
  const onCheckName = (e) => {

  }

  return (
    <InputWrap isUserName={isUserName}>
      <label className='inputLabel'>
        <input className='inputInput' value={userName} onChange={(e)=>{setUserName(e.target.value); onCheckName(e);}}/>
      </label>
    </InputWrap>
  )
}

export default SignUpUserInput;

注册.jsx：

这是父组件。我获得的值为userInvalid，并希望在此组件中使用此值

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import SignUpLoginButton from '../components/SingUp/SignUpLoginButton';
import SignUpUserInput from '../components/SingUp/SignUpUserInput';

const SignUpWrap = styled.div`
  flex-direction: column;
  display: flex;
  position: relative;
  z-index: 0;
`

function SignUp() {

  const toParentUser = (userInvalid) => {
    console.log('성공', userInvalid)
  }

  // I want to use this value
  const useThis = userInvalid;

  const [userName, setUserName] = useState("");

  return (
    <SignUpWrap>
      <div className='signUpInputContent4'>
        <SignUpUserInput userName={userName} setUserName={setUserName} toParentUser={toParentUser}/>
      </div>
      <div className='signUpInputContent6'>
        {/* want to use value here */}
        <Link to='/birthday' style={{textDecoration : 'none' ,color: 'inherit', pointerEvents: userInvalid && 'none'}}>
          <div className='signUpInputLoginButton'>
            <SignUpLoginButton email={email} name={name} userName={userName} passWord={passWord}/>
          </div>
        </Link>  
      </div>                  
    </SignUpWrap>
  )
}

export default SignUp;