React:TypeError:items.map不是函数.即使我的状态是一个数组

Question

问题：在我的子组件中：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;

Answer 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>

Answer 2

当您在输入更改时(在CreateItem中)调用setItem时，您将父组件的状态设置为单个(非数组)值。由于项不再是数组，因此后续渲染将引发。