Javascript 类型错误：Can'；t读取属性'；地图'；组件在React中上载文件时的未定义值

我是新手。 当props.submitlk===true时（绿色指示灯表示已单击“我的上载”按钮并从另一个组件的表单发送文件） ，我试图用一个新的技术对象更新state setList，但现在只是“SomeObject”。单击后，我得到一个“TypeError无法读取未定义的属性'map'。我试着在一些条件下胡闹，但几个小时后就没什么运气了。这是一个异步问题，映射发生得太快了吗？handleRemove在删除对象时可以正常工作。如果我删除If语句下的函数，它不会在表单提交时抛出错误。此外，对象将变得更大，这就是它当前以这种方式嵌套的原因。谢谢你的回答

function SampleData(props) {
const [list, setList] = React.useState( [
        {
            closedguard: [
                {
                    name: "Armbar",
                    link: "",
                    x: "X",
                    id: "1",
                },
                {
                    name: "Triangle",
                    link: "",
                    x: "X",
                    id: "2",
                },
                {
                    name: "Omaplata",
                    link: "",
                    x: "X",
                    id: "3",
                },
        ] } 
    ] );  
 
    if( props.submitClk === true) {
        setList([...list, 'SomeObject'])
      }

  const handleRemove = (id) => {
    const newList = list[0].closedguard.filter(move => move.id !== id);
    setList([{ closedguard: newList }]);
};

    return (
        <div className="guard">
    
            <ul className="techUl">
                {" "}
                Closed Guard
                {list.map((pos) =>
                        pos.closedguard.map((move, id) => (
                            <li
                                key={id}
                                className="techLi"
                                                
                                >{move.name}
                                <span onClick={(id) => handleRemove(move.id)}> {move.x}</span>
                            </li>
                        ))
                    )}
            </ul>       
        </div>
    );
}

函数采样数据（props）{
const[list，setList]=React.useState（[
{
封闭守卫：[
{
名称：“扶手”，
链接：“，
x:“x”，
id:“1”，
},
{
名称：“三角形”，
链接：“，
x:“x”，
id:“2”，
},
{
名称：“Omaplata”，
链接：“，
x:“x”，
id:“3”，
},
] } 
] );  
if（props.submitck==真）{
setList（[…list，'SomeObject']）
}
const handleRemove=（id）=>{
const newList=list[0]。closedguard.filter（move=>move.id！==id）；
setList（[{closedguard:newList}]）；
};
返回(

{" "}
封闭式防护
{list.map（（pos）=>
位置关闭守卫地图（（移动，id）=>(
{move.name}
handleRemove（move.id）}>{move.x}

))
)}

);
}

首先，如果没有

someObject

，您将面临

太多的重新渲染。React限制渲染的数量以防止无限循环。

然后更新嵌套对象：

[
        {
            closedguard: [
                {
                    name: "Armbar",
                    link: "",
                    x: "X",
                    id: "1",
                },
                {
                    name: "Triangle",
                    link: "",
                    x: "X",
                    id: "2",
                },
                {
                    name: "Omaplata",
                    link: "",
                    x: "X",
                    id: "3",
                },
            ] 
        }
]

对象数组，然后对象

closedguard

位于其中，该数组是一个数组

所以在这种情况下你能做的就是

// think is the some objects
const newObject = [
      {
        name: "test1",
        link: "",
        x: "X",
        id: "5"
      },
      {
        name: "test2",
        link: "",
        x: "X",
        id: "56"
      }
    ];
    setList([{ closedguard: [...list[0].closedguard, ...newObject] }]);

而不是

setList([...list, 'SomeObject'])

---

如果要更新嵌套对象以将元素添加到

closedguard:

属性数组，请选中@Nafis answer

我认为问题在于，您添加的新对象没有

closedguard

属性，因此映射函数无法映射该对象

如果添加具有该属性的对象，则该属性将起作用，例如：

const objToAdd = {closedguard: [
    {
    name: "newObj1",
    link: "",
    x: "X",
    id: "3",
   },
    {
      name: "newObj2",
      link: "",
      x: "X",
      id: "3",
    }] 
  }

如果要添加具有其他属性的对象，则可能需要映射相应的键，以确保从对象中获取属性，因此需要更改

pos.closedguard.map（（移动，id）=>（

作者：

pos[Object.keys（pos）[0]].map（（move，id）=>（

例如

因此，如果您的对象没有

closedguard

，则该对象的第一个属性将被映射

将完整的申报表与我的提案一起发布，以明确我的提案：

return (
    <div className="guard">
      <ul className="techUl">
        {" "}
        Closed Guard
        {list.map((pos) =>
          pos[Object.keys(pos)[0]].map((move, id) => ( //CHANGE HERE
            <li
              key={id} className="techLi"         
              >{move.name}
              <span onClick={(id) => handleRemove(move.id)}> {move.x}</span>
            </li>
          ))
        )}
      </ul> 
      <button onClick={handleOnClick}>Button</button>      
  </div>
  );

返回(

{" "}
封闭式防护
{list.map（（pos）=>
pos[Object.keys（pos）[0]].map（（move，id）=>（//在此处更改
{move.name}
handleRemove（move.id）}>{move.x}

))
)}

按钮
);

更新ur状态的closeguard数组

列表

u可以看到@Nafis-answer，但是u 应该使用useEffect挂钩来运行副作用。尝试将此逻辑与@Nafis answer结合起来以更新状态-

if（props.submitlk==true）{setList（[…list，'SomeObject']）}

在useEffect挂钩内，如下图所示

useEffect(()=>{
if( props.submitClk === true) {
    setList([...list, 'SomeObject']) }

},[list])

现在修改list.map函数如下，这样你就不会得到map undefined错误

{list.length > 0 && list.map((pos) =>
                    pos.closedguard.map((move, id) => (
                        <li
                            key={id}
                            className="techLi"
                                            
                            >{move.name}
                            <span onClick={(id) => handleRemove(move.id)}> {move.x}</span>
                        </li>
                    ))
                )}

{list.length>0&&list.map（（pos）=>
位置关闭守卫地图（（移动，id）=>(
{move.name}
handleRemove（move.id）}>{move.x}

))
)}

---

让我知道它是否工作。

pos.closedguard未定义。我认为要使用上一个状态（…list），您希望将其作为setList中函数的参数传递：

setList（（prevList）=>{[…list，'SomeObject']）

仍然是相同的错误，但谢谢。通过这种方式，您将向

closedguard:

数组属性添加元素。根据操作码

[…列表，'SomeObject']

，这将涉及创建另一个完整的父对象，而不是向closedguard数组属性添加元素。不过，你的答案可能是问题的答案……我真的很抱歉，我不是想复制urs。我想复制他的代码。ur在顶部，所以在复制时我可能会误解为他的。Thnx指出他正在获得在列表数组上使用映射函数时出错，当文件从其他组件发送时，此组件在道具中以真实值装载，并且他正试图根据真实情况更新此组件的状态。因此，我只是提出可能导致该错误的原因。请让我知道我的理解是否正确