reactjs - 无法从 react 钩子(Hook)状态获取值

Question

我是 React Native 和 Hooks 的新手。在我的项目中，我声明了两个状态属性，我想将它们放入函数中。但我没有从钩子(Hook)属性中获取值。在控制台中，它正在写入 [object object]

const Login =()=> {
  const [username, setUserName] = React.useState('');
  const [password, setPassword] = React.useState('');

  callAPI = async ()=>{
    console.log('api called :' + username)
  }
}

Answer 1

这是您想要实现的目标的一个工作示例。

function mockAPI(username,password) {
  return new Promise((resolve,reject) => {
    setTimeout(()=>resolve(`The API received username: ${username} and pwd: ${password}`),1000);
  });
}

function App() {
  
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  
  function callMockAPI(user,pwd) {
    mockAPI(user,pwd)
    .then((result)=>console.log(result));
  }
  
  return(
    <React.Fragment>
      <div>
        Username: <input type='text' value={username} onChange={()=>setUsername(event.target.value)}/>
      </div>
      <div>
        Password: <input type='password' value={password} onChange={()=>setPassword(event.target.value)}/>
      </div>
      <div>
        <button onClick={()=>callMockAPI(username,password)}>Submit</button>
      </div>
    </React.Fragment>
  );

}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>