Question

我是React Hooks的新手，我正在创建一个对象为Hook的示例。我读到，在更改Hook时，它的优良作法是使用先前的Hook来更改与使用prevState进行的状态相同的更改。我创建了两个输入字段，它们将接受输入并在标题中显示输入。

import React, {useState} from 'react'

function NameHook() {

    const [name, setName] = useState({firstName: '', lastName: ''})

    const changeName = e => {
        setName( prevName => (
            {
                ...prevName, 
                [e.target.name]: e.target.value
            })
        )
    }

    return (
        <div>
            <input 
                type="text"
                value={name.firstName}
                onChange={changeName} 
                name="firstName"
            />

            <input 
                type="text"
                value={name.lastName}
                onChange={changeName}
                name="lastName"
            />
            <h1>{name.firstName}</h1>
            <h1>{name.lastName}</h1>
        </div>
    )
}

export default NameHook

现在，每当我在字段中键入第二个字符时，我都会得到错误

Cannot read property 'name' of null

我在this中读到答案，这是因为REACT正在回收事件并按如下所示更改changeName函数可以解决该错误

const changeName = e => {
        e.persist()
        setName( prevName => (
            {
                ...prevName, 
                [e.target.name]: e.target.value
            })
        )
    }

但是，如果我不使用prevName并直接将setName与当前名称值一起使用，则代码也一样工作

const changeName = e => {
        setName( 
            {
                ...name, 
                [e.target.name]: e.target.value
            }
        )
    }

如果事件被回收会导致问题，那么当我不使用prevName时，它也应该会造成问题，因为我们只是在其中更改setName方法。我不明白为什么它现在可以正常工作，为什么我在使用prevName时出现错误。

Answer 1

您可以通过这种方式尝试，我也是react钩子上的新手，我试图以以下方式运行此代码，并且它可以运行

import React, {useState} from 'react'

function NameHook() {

    const [name, setName] = useState({firstName: '', lastName: ''})

    const changeName = e => {
      console.log(e.target.name);
      console.log(e.target.value);

        var oldname = name;
        var newname = {
          ...oldname,
          [e.target.name]: e.target.value
        }


        setName( newname)
    }

    return (
        <div>
            <input 
                type="text"
                value={name.firstName}
                onChange={(e)=>{changeName(e)}} 
                name="firstName"
            />
            <input 
            type="text"
            value={name.lastName}
            onChange={changeName}
            name="lastName"
        />
            <h1>{name.firstName}</h1>
            <h1>{name.lastName}</h1>
        </div>
    )
}

export default NameHook

无法读取null reactjs的属性“名称”

1 个答案: