反應：TypeError：items.map不是函式。即使我的狀態是一個陣列-有解無憂

問題： 在我的子組件中：TypeError: items.map is not a function

我不明白為什么不，我看到其他人在映射不是陣列的東西時遇到了這個問題。然而我的顯然是。如父組件的第四行所示。

母公司：

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;

uj5u.com熱心網友回復：

當您呼叫setItem輸入更改（在 CreateItem 中）時，您將父組件上的狀態設定為單個（非陣列）值。隨后的渲染拋出，因為 items 不再是一個陣列。

uj5u.com熱心網友回復：

是道具問題，地圖語法也有問題

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/325856.html

標籤：数组反应使用状态

上一篇：從動態嵌套陣列生成物件的平面陣列

下一篇：Android 傳感器資料獲取