React：TypeError：items.map 不是函数。即使我的状态是一个数组答案

【问题标题】：React: TypeError: items.map is not a function. Even though my state is an arrayReact：TypeError：items.map 不是函数。即使我的状态是一个数组
【发布时间】：2021-10-19 07:53:04
【问题描述】：

问题： 在我的子组件中： TypeError: items.map 不是函数

我不明白为什么不这样做，我看到其他人在映射不是数组的东西时遇到了这个问题。然而我的显然是。如父组件的第四行所示。

母公司：

import React, {useState} from 'react';
import ListItem from '../components/listItem';

const Pagethree = () => {
const[items,setItem] = useState([]);
return(
    <div>
        <CreateItem items={items} setItem={setItem}/>
        <ListItem items={items}/>
    </div>
)
};

export default Pagethree;

儿童比赛 1：

import React, {useState} from "react";

const ListItem = (props) =>{
const {items} = props;
return(
    <div>
        <h1>list item comp</h1>
        <ul>
            {
            items.map((item, i) =>
                <div class="flex">
                    <input type="checkbox" />
                    {item}
                    <button>delete</button>
                </div>
            )
            }
        </ul>
    </div>
)
};

export default ListItem;

子组件 2：

import React from "react";

const CreateItem = (props) =>{
const {items, setItem} = props;
const addItem = (e) =>{
    e.preventDefault();
    setItem([...items, items]);
    setItem("");
    console.log(items);
}
return(
    <div>
        <h1>create item comp</h1>
        <form onsubmit={addItem}>
            <input type="text" value={items} onChange={e => setItem(e.target.value)}/>
            <button type="submit">add item</button>
        </form>
    </div>
)
};

export default CreateItem;

【问题讨论】：

您发布的代码对我来说看起来不错。错误是立即发生还是在第一次setItem() 调用之后发生？我假设您将 items 设置为那里不是数组的东西。
.map 仅适用于数组，我担心项目可能已更改为对象或任何其他数据类型。
这是Pagethree 组件的全部吗？您当前在 sn-p 中的内容是正确的，不应引发任何错误。您稍后会更新items 状态吗？如果是这样，请在您的问题中包含所有相关代码。如果您正在更新状态，那么还请分享您将其更新到的内容（您入队的值）。
我确实有另一个用于创建对象的组件。我在上面添加了代码。一旦我在输入中输入任何内容，就会出现错误
为什么要在addItem中设置item为空字符串？为什么在 on change 中将 items 设置为事件的 target.value？

标签： arrays reactjs use-state

【解决方案1】：

您的目标是什么并不完全清楚，但这可能会有所帮助。它是一种将单个项目（在提交时）添加到项目列表的基本表单。

const { useState } = React;

const App = () => {
  const [items, setItems] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    const item = e.target.elements['itemInput'].value;
    setItems([...items, item]);
    e.target.reset();
  }
  const itemsDisplay = `Your items are: ${items.join(', ')}`;

  return (
    <React.Fragment>
      <p>{itemsDisplay}</p>
      <form onSubmit={handleSubmit}>
        <input name='itemInput' />
        <button type='submit'>Add Item</button>
      </form>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案2】：

当您在输入更改时（在 CreateItem 中）调用 setItem 时，您将父组件的状态设置为单个（非数组）值。随后的渲染抛出，因为 items 不再是一个数组。

【讨论】：

【解决方案3】：

是道具问题，地图语法也是问题

import React, {useState} from "react";
const ListItem = ({items}) =>{

return(
    <div>
        <h1>list item comp</h1>
        <ul>
            {
            items.map((item, i) =>(
                <div class="flex">
                    <input type="checkbox" />
                    {item}
                    <button>delete</button>
                </div>)
            )
            }
        </ul>
    </div>
)
}

export default ListItem;
};

【讨论】：

抱歉，这个答案想要表达的意思不是很清楚。它似乎也是 OP 代码的复制/粘贴，没有任何说明。
@DrewReese 读取子组件。是道具问题
还有什么问题？请澄清并解释问题是什么，以及解决方案解决问题的原因。如果你暗示 OP 不能从 props 和 const { items } = props; 解构，那么我相信你错了。
再次阅读@DrewReese
@DrewReese 你能看懂地图语法吗