赋值但从未在 React 表单上使用答案

【问题标题】：Assigned values but never used on React form赋值但从未在 React 表单上使用
【发布时间】：2019-09-06 00:23:47
【问题描述】：

我的注册表单组件在控制台中向我显示警告说我的值从未使用过。

第 57 行：“displayName”被赋值，但从未使用 no-unused-vars

第 57 行：'email' 被分配了一个值，但从未使用过 no-unused-vars

第 57 行：“密码”被分配了一个值，但从未使用过 no-unused-vars

第 57 行：“confirmPassword”被赋值，但从未使用过 no-unused-vars

这是我认为有问题的一些代码。

            this.setState({
                displayName: '',
                email: '',
                password: '',
                confirmPassword: '',
            })
        } catch (error) {
            console.log(error);
        }
 }
      handleChange(event) {
        const { name, value } = event.target;

        this.setState({ [name]: value });
    }
    render(){
        const { displayName, email, password, confirmPassword } = this.state
        return(
            <div className='SignUpForm'>
            <h2 className='signupTitle'>New here? Sign up for an account.</h2>
            <form className='Signin' onSubmit={this.handleSubmit} noValidate autoComplete="off">

            <TextField
              className='displayName'
              name='displayName'
              id="standard-name"
              type='text'
              label="Display Name"
              margin="normal"
              onChange={this.handleChange}
              value={this.state.displayName}
              required
            />

            <TextField
              className='email'
              name='email'
              id="standard-name"
              type='text'
              label="Email"
              margin="normal"
              onChange={this.handleChange}
              value={this.state.email}
              required
            />

              <TextField
             className='password'
             name='password'
             type='password'
             id="standard-password-input"
            label="Password"
            margin="normal"
            onChange={this.handleChange}
            value={this.state.password}
            required
            />

              <TextField
             className='confirmPassword'
             name='confirmPassword'
             type='password'
             id="standard-password-input"
            label="Confirm Password"
            margin="normal"
            onChange={this.handleChange}
            value={this.state.confirmPassword}
            required
            />

注册表单工作正常，新用户已添加到 Firebase 数据库。

谢谢。

【问题讨论】：

你是如何声明你的state: { }的？
在render 函数的顶部，您正在通过解构状态为displayName、email、password 和confirmPassword 创建局部变量。在您的组件中，您为这些变量中的每一个传递this.state.{variable}，因此您声明的本地变量永远不会被使用，正如您的警告所指出的那样。

标签： reactjs firebase

【解决方案1】：

导致警告的这一行，

const { displayName, email, password, confirmPassword } = this.state

在这里，您将状态放入单独的变量中，但您没有在代码中的任何地方使用它们。

你有两种方法，

要么删除此行。
或者你可以像这样使用它们，

<TextField
  className='displayName'
  name='displayName'
  id="standard-name"
  type='text'
  label="Display Name"
  margin="normal"
  onChange={this.handleChange}
  value={displayName}   //Instead of this.state.displayName use displayName only
  required
/>

这样你可以在其他合适的TextField中使用其他变量。

【讨论】：

好吧，我明白了。谢谢。