Reactjs 动态路由未定义

我使用的API接收电话号码作为参数，以从用户返回数据。因此，在UI中，我收到这个号码，通过

控制台.log

我可以看到数据。但我也希望，当点击按钮时，用户被带到一个只包含与他们相关的数据的链接，要做到这一点，我相信我必须将用户重定向到一个动态链接，例如：“/user/john”。我总是在链接中得到

未定义的
，我不知道为什么。感觉状态本身并没有存储API数据

const Login =()=> {
  const history = useHistory()
  const location = useLocation()
  const [state, setState] = useState('')
  const [data, setData] = useState({});
  const phone = state
...
  let headers = new Headers();
  headers.set("Authorization", "Basic " + btoa(username + ":" + password));

    const handleClick=() => {
    getData();
  };    
  
  const getData = async () => {
    const a = await fetch(url, { method: "GET", headers: headers });
    const response = await a.json();
    setData(response.user[0].attributes[0]);
    history.push(`/user/${data.name}`)
  };
  
   const onTextChange = event => {
        setState(event.target.value);
      }
<input onChange={onTextChange}>
 <Button  onClick={handleClick} >
    login
 </Button> 

const Login=（）=>{
const history=useHistory（）
const location=useLocation（）
常量[状态，设置状态]=使用状态（“”）
const[data，setData]=useState（{}）；
const phone=状态
...
let headers=新的headers（）；
headers.set（“授权”、“基本”+btoa（用户名+：“+密码））；
常量handleClick=（）=>{
getData（）；
};    
const getData=async（）=>{
const a=await-fetch（url，{method:“GET”，headers:headers}）；
const response=wait a.json（）；
setData（response.user[0].attributes[0]）；
history.push（`/user/${data.name}`）
};
const onTextChange=事件=>{
设置状态（事件、目标、值）；
}
登录
状态总是异步设置（）。
setData（response.user[0]。attributes[0]）
将采取一些措施，因为js是异步的，所以将执行下一行，即
history.push（'/user/${data.name}'）
。由于还没有数据，因此
data.name将是未定义的

相反，您必须直接使用history.push（
/user/${（response.user[0].attributes[0]）.name}
）

以下是更新的代码：

    const Login = () => {
    const history = useHistory()
    const location = useLocation()
    const [state, setState] = useState('')
    const [data, setData] = useState({});
    const phone = state
    ...
    let headers = new Headers();
    headers.set("Authorization", "Basic " + btoa(username + ":" + password));

    const handleClick = () => {
    getData();
    };

    const getData = async () => {
    const a = await fetch(url, { method: "GET", headers: headers });
    const response = await a.json();
    const respData = response.user[0].attributes[0]
    setData(respData);
    history.push(`/user/${respData.name}`)
    };

    const onTextChange = event => {
    setState(event.target.value);
    }
    <input onChange={onTextChange}>
    <Button onClick={handleClick} >
      login
    </Button>

const Login=（）=>{
const history=useHistory（）
const location=useLocation（）
常量[状态，设置状态]=使用状态（“”）
const[data，setData]=useState（{}）；
const phone=状态
...
let headers=新的headers（）；
headers.set（“授权”、“基本”+btoa（用户名+：“+密码））；
常量handleClick=（）=>{
getData（）；
};
const getData=async（）=>{
const a=await-fetch（url，{method:“GET”，headers:headers}）；
const response=wait a.json（）；
const respData=response.user[0]。属性[0]
setData（respData）；
history.push（`/user/${respData.name}`）
};
const onTextChange=事件=>{
设置状态（事件、目标、值）；
}
登录