Question

我正在建立小任务。当我们按下按钮“添加用户”时 - 我们看到一个表格，里面有输入。当我们将信息输入输入时 - 我们可以按下“发送信息”按钮。我们添加了一个新用户。我用反应来构建它。当我向Users数组添加新用户时，我为该用户创建了id。然后我用这个id。但问题是，在我将信息放入表单并按下“发送信息”按钮后 - 我在控制台中看到“内联通天塔脚本：39未捕获的ReferenceError：键未定义“。为什么会发生？

import XCTest
@testable import TestTests

class TestTestsTests: XCTestCase {

    func testExample() {
        let sut = Test()

        XCTAssertEqual(1, sut.testInternal())
    }

    func testPrivateExample() {
        let sut = Test()

        XCTAssertEqual(3, sut.exposePrivate())
    }
}

.user{
    display: flex;
    width: 100vw;
}
.user-name, .user-phone, .user-address, .user-photo, .buttons{
    width: 20vw;
}
#header{
    background: goldenrod;
    display: flex;
    width: 100vw;
    margin-top: 6vw;
}
#add-user-btn{
    position: absolute;
    top:2vw;
    right: 1vw;
}

Answer 1

的console.log（ID）;应更改为console.log（user.id）;

Answer 2

问题在于此类的实现：

class User extends React.Component{
        render(){
            return(
            <div className="user" key={key}>
                 <div className="user-name">{name}</div>
                 <div className="user-phone">{phone}</div>
                 <div className="user-address">{address}</div>
                 <div className="user-photo"></div>
                 <div className="buttons">
                     <button className="delete">delete</button>
                     <button className="edit">edit</button>
                 </div>
            </div>
    )
}      
}

渲染函数指的是几个未定义的变量。

为了使此类无错误地执行，render函数需要删除对未定义变量的引用或提供这些变量的定义。

值得注意的是这种插值语法：

<div>{ someVariable }</div>

要求someVariable是块范围内的已定义变量。插值内的代码（在这种情况下为someVariable）作为普通JavaScript执行。

此功能允许我们编写如下代码：

<div>2 + 2 is { 2 + 2 }</div>

这是这样渲染的：

<div>2 + 2 is 4</div>

key未定义React

2 个答案: