React状态无法读取属性

imzjd6km  于 2022-10-15  发布在  React
关注(0)|答案(1)|浏览(178)

我在使用Reaction时遇到了一个问题,它对单个用户资产有效,但当我将其作为对象时,它失败了,代码如下:

import React, { useState } from 'react'
import {Link} from "react-router-dom"
import {DatabaseNetworkPoint} from '@icon-park/react';
import axios from "axios"

export default function Register() {

    const [user, setUser] = useState({
        username:"",
        email:"",
        password:"",
        age:0,
        gender:"",
    })
    const [file, setFile] = useState(null)

    const handleChange = (event) => {
        console.log(event.target.value)
        setUser({
            username:event.target.value,
        email:event.target.value,
        password:event.target.value,
        age:event.target.value,
        gender:event.target.value,
        img:event.target.files[0]
        })

        setFile(event.target.files[0])

    }

    const handleSubmit = (event) => {
        event.preventDefault()
        console.log('button clicked', event.target)
      }

  return (
    <div className='container'>
      <div className='left'>
       <div className='logo'>
       <DatabaseNetworkPoint theme="outline" size="150" fill="#333"/>
        <h1>WonderHit</h1>
       </div>
          <form className='form' onSubmit={handleSubmit}>
          <input placeholder='Username' value={user.username} className='field' type="text" onChange={handleChange} />
          <input placeholder='Email' value={user.email} className='field' type="email" onChange={handleChange} />
          <input placeholder='Password' value={user.password} className='field' type="password" onChange={handleChange} />
          <input placeholder='Age' value={user.age} className='field' name='age' type="number" onChange={handleChange} />
          <input placeholder='Gender' value={user.gender} className='field' name='gender' type="text" onChange={handleChange} />
          <div className='profilePic'>
            <div className='Photo'></div>
            <input className='field2' id='file' type="file" onChange={handleChange} />
            <label htmlFor = "file"  className='uploadPic' >+</label>
          </div>
          <button className='submit' type="submit">Register</button>
          <h3 className='routing'>You already have an account ? <Link className='rot' to="/">Login</Link></h3>
        </form>
      </div>
      <img className='right' src='https://images.unsplash.com/photo-1562577309-4932fdd64cd1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80' />
    </div>
  )
}

这就是我得到的错误:
未捕获的TypeError:无法读取Null的属性(读取‘0’)可能是什么问题??是不是这个文件引起了我的问题?我应该把它当作字符串处理吗?

0g0grzrc

0g0grzrc1#

img:event.target.files[0]您为每个<input>调用handleChange,无论它是不是文件类型。

相关问题