Javascript 如何在模式中显示所选行

目标：
按下按钮时，所选行的名字和姓氏将显示在模式中。 您应该能够重用相同模式的内容和代码

问题：
我不知道如何解决这个问题，为了达到这个目标，我缺少了什么

信息：
*我是新来的

Stackblitz:

---

---

我建议实际制作动态内容。这将使您能够轻松访问该数据

this.state={
modalOpenWith:null，
项目：[
{firstName:'Josef'，lastName:'Anderson'，key:'Josef.Anderson'}，
{姓：“吉姆”，姓：“韦斯特”，键：“吉姆。韦斯特”}，
{名字：'乔'，姓氏：'西'，键：'乔.西'}
]
};

然后使用以下命令渲染它：

{items.map（{firstName，lastName，key}，i）=>(
{firstName}
{lastName}
this.handleOpenModal（i）}>Open模式
))}
;

您还可以直接存储打开的项而不是索引。这可能会避免一些状态错误

钥匙 您现在需要一个密钥，以便在数组发生更改时，react知道删除/添加了哪个项。此密钥在阵列中必须是唯一的。因此，在这种情况下，听起来您可能会有某种用户id，但我选择向数组中添加一个键属性，类似于要登录的用户名（无论是什么）

请在此处阅读有关密钥的更多信息：

箭头函数而不是方法 我还冒昧地将this绑定转换为带有箭头函数的属性。这样，上下文总是这样。看一看

带索引的Stackblitz：

Stackblitz与项目：

---

我建议实际制作动态内容。这将使您能够轻松访问该数据

this.state={
modalOpenWith:null，
项目：[
{firstName:'Josef'，lastName:'Anderson'，key:'Josef.Anderson'}，
{姓：“吉姆”，姓：“韦斯特”，键：“吉姆。韦斯特”}，
{名字：'乔'，姓氏：'西'，键：'乔.西'}
]
};

然后使用以下命令渲染它：

{items.map（{firstName，lastName，key}，i）=>(
{firstName}
{lastName}
this.handleOpenModal（i）}>Open模式
))}
;

您还可以直接存储打开的项而不是索引。这可能会避免一些状态错误

钥匙 您现在需要一个密钥，以便在数组发生更改时，react知道删除/添加了哪个项。此密钥在阵列中必须是唯一的。因此，在这种情况下，听起来您可能会有某种用户id，但我选择向数组中添加一个键属性，类似于要登录的用户名（无论是什么）

请在此处阅读有关密钥的更多信息：

箭头函数而不是方法 我还冒昧地将this绑定转换为带有箭头函数的属性。这样，上下文总是这样。看一看

带索引的Stackblitz：

Stackblitz与项目：

---

将用户置于以下状态：

users: [
    { fname: 'a', lname: 'b' },
    { fname: 'c', lname: 'd' },
    { fname: 'f', lname: 'e' }
  ]

在您的表中，您可以使用map，但如果您的数据来自某个州，请先检查是否设置了map：

{this.state.users !== "undefined" &&
          this.state.users.map((user, index) => {
            const { fname, lname } = user; //destructuring
            return (
              <tr key={index}>
                <td>{fname}</td>
                <td>{lname}</td>
                <td>
                  <button
                    onClick={() => this.handleOpenModal(fname, lname)}
                  >
                    Open Modal
                  </button>
                </td>
              </tr>
            );
          })}

{this.state.users！==“未定义”&&
this.state.users.map（（用户，索引）=>{
const{fname，lname}=user；//解构
返回(
{fname}
{lname}
this.handleOpenModal（fname，lname）}
>
开放模态
);
})}

---

将用户置于以下状态：

users: [
    { fname: 'a', lname: 'b' },
    { fname: 'c', lname: 'd' },
    { fname: 'f', lname: 'e' }
  ]

在您的表中，您可以使用map，但如果您的数据来自某个州，请先检查是否设置了map：

{this.state.users !== "undefined" &&
          this.state.users.map((user, index) => {
            const { fname, lname } = user; //destructuring
            return (
              <tr key={index}>
                <td>{fname}</td>
                <td>{lname}</td>
                <td>
                  <button
                    onClick={() => this.handleOpenModal(fname, lname)}
                  >
                    Open Modal
                  </button>
                </td>
              </tr>
            );
          })}

{this.state.users！==“未定义”&&
this.state.users.map（（用户，索引）=>{
const{fname，lname}=user；//解构
返回(
{fname}
{lname}
this.handleOpenModal（fname，lname）}
>
开放模态
);
})}

---

目前，您没有在该州存储您的名字和姓氏。设置它就像您使用modalIsOpen一样。然后尝试在模态名称中显示它：{this.state.firstName}。目前，您没有在状态中存储您的firstName&lastName。设置它就像您使用modalIsOpen一样。然后试着在你的模态名字中显示它：{this.state.firstName}。你实际上不需要

typeof

。直接与未定义的相比，你是对的。谢谢我还应该将tr的键改为索引。我强烈建议不要使用索引（但实际上我根本忘了在我的答案lol[现在添加它]）中包含索引。注意他们如何陈述最后手段：）是的，我总是使用我数据的ID作为密钥。我经常使用

[ID1:{key1:value1，key2:value2}…]

作为API返回数据的一部分。实际上，您不需要

typeof

。直接与未定义的相比，你是对的。谢谢我还应该将tr的键改为索引。我强烈建议不要使用索引（但实际上我根本忘了在我的答案lol[现在添加它]）中包含索引。注意他们如何陈述最后手段：）是的，我总是使用我数据的ID作为密钥。我经常使用

[ID1:{key1:value1，key2:value2}…]

作为API返回数据的一部分。