React: TypeError: items.map is not a function. Even though my state is an array

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

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

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;
};

Answer 2

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

Answer 3

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

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>

React: TypeError: items.map is not a function. Even though my state is an array

React: TypeError: items.map is not a function. Even though my state is an array

arrays

reactjs

use-state