Question

我想要console.log（City）但在子文件中
我在浏览器中使用react工具肯定会看到钩子状态：'xxx'

父级第一个文件（fxx.js）

export const UserForm =() => {
 const[city,setCity]=useState('')

function nextStep(){
 setStep(step+1)
}
function prevStep(){
  setStep(step-1)
 }


 switch(step){
  case 1:
   return (
  <>

    <UserDetail
    nextStep={nextStep}
    submitValue={submitValue}
    City ={e => setCity(e.target.value)}
     />
      </>
   )
   case 2:
   return (
     <>
   <PersonDetail 
   nextStep={nextStep}
   prevStep={prevStep}
   />
   </>
   )
 }
}

第二个子文件（sxx.js）

function UserDetail(props) {

 console.log(City)

function conti(e){
  e.preventDefault()
  props.nextStep()
}

 return (
  <>
        <TextField onChange={props.City} defaultValue={props.City}/>
        <Button variant="outlined" color="primary" onClick={conti}></Button>
  </>
 )
}

console.log（城市）不起作用
我尝试：
this.state.City
国家。城市
城市
Hook.City

它们不起作用
我很困惑状态值如何传递
主要思想是在其他js文件中获取“城市”值
是在道具中保存值的唯一方法吗？

请帮助

Answer 1

Ciao，您的问题在于如何在此行中通过City上的UserDetail道具：

City ={e => setCity(e.target.value)}

您传递了一个函数，而不是要记录的值。无论如何，我明白你为什么这样通过。因为您还想在TextField上设置城市。

我的建议是使用2个道具：一个用来阅读城市，另一个用来设置城市。这样您的代码将变为：

父级第一个文件（fxx.js）

export const UserForm =() => {
 const[city,setCity]=useState('')

function nextStep(){
 setStep(step+1)
}
function prevStep(){
  setStep(step-1)
 }


 switch(step){
  case 1:
   return (
  <>

    <UserDetail
    nextStep={nextStep}
    submitValue={submitValue}
    setCity={e => setCity(e.target.value)}
    City={city}
     />
      </>
   )
   case 2:
   return (
     <>
   <PersonDetail 
   nextStep={nextStep}
   prevStep={prevStep}
   />
   </>
   )
 }
}

第二个子文件（sxx.js）

function UserDetail(props) {

 console.log(props.City)

function conti(e){
  e.preventDefault()
  props.nextStep()
}

 return (
  <>
        <TextField onChange={props.setCity} defaultValue={props.City}/>
        <Button variant="outlined" color="primary" onClick={conti}></Button>
  </>
 )
}

因此，现在console.log(props.City)记录了城市道具，并且TextField的{{1}}函数在父组件中设置了onChange的值。

如何传递挂钩状态值

1 个答案: