Question

我想使用axios提取数据后访问props中的函数，但是出现错误：

期望分配或函数调用，而是看到一个表达式no-unused-expressions

我可以在jsx中访问相同的函数，但是当我尝试从function / axios调用它时，它不起作用。这是我的代码：

function LoginModal(props) {


let emailInput = React.createRef();
let passwordInput = React.createRef();



const getToken = (props) => {
    axios.post('http://localhost:8000/api/token/', {
        username: emailInput.current.value,
        password: passwordInput.current.value
      })
      .then(function (response) {
        props.closeModalHandler();
      })

}

return (
    <div className={styles.Background} onClick={props.closeModalHandler}>
    <div className={styles.ModalContainer}>
        <h2>Log in.</h2>
        <div className={styles.InputContainer}>
            <input type="text" className={styles.Input} ref={emailInput} />
            <label htmlFor="" className={styles.ActiveLabel}>Email</label>
        </div>
        <div className={styles.InputContainer}>
            <input type="password" className={styles.Input} ref={passwordInput}/>
            <label htmlFor="" className={styles.ActiveLabel}>Password</label>
        </div>
        <button className={styles.LoginButton}
                onClick={getToken}>Log me in</button>
        <p>Forgot password? <br/>
           Reset it <b>here</b>
        </p>

    </div>
</div>
)}

Answer 1

props不会传递给onClick处理程序（合成React事件对象）。只需从getToken参数列表中删除该参数，即可关闭传递给LoginModal的参数：

const getToken = () => {
// −−−−−−−−−−−−−−^^
    axios.post('http://localhost:8000/api/token/', {
        username: emailInput.current.value,
        password: passwordInput.current.value
      })
      .then(function (response) {
        props.closeModalHandler();
      })
      // *** Handle errors here -- you probably have to close the modal even
      // when things go wrong...
}

无法访问功能内的道具

1 个答案: