解决错误消息"react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function"

Question

我不知道为什么，但当我改变选择器中的选项时，我不断得到这个错误。"react-dom.development.js:4091 Uncaught TypeError: onItemSelect不是一个函数">(

import React from "react";
import Product from "./Product";
import ListGroup from "./listGroup";

export default function Main(props) {
const { products, onAdd, categories } = props;

const handleCategorySelect = () => {
console.log("Click");
};

return (
<main className="block col-2">
<ListGroup items={categories} />
<h2>Products</h2>
<div>
{products.map((product) => (
<Product
key={product.id}
product={product}
onAdd={onAdd}
onItemSelect={handleCategorySelect}
></Product>
))}
</div>
</main>
);
}

和我的listGroup。JSX is:

import React from "react";
function ListGroup(props) {
const { items, onItemSelect } = props;
return (
<form>
<select
value=""
id="category"
name="category"
onChange={() => onItemSelect()}
>
<option hidden value="">
Choose here
</option>
{items.map((item) => (
<option key={item._id}>{item.name}</option>
))}
</select>
</form>
);
}
export default ListGroup;

以及我如何将项目对象传递给onChange ?我的意思是，如果它是一个列表组，我会用:

<ul className="list-group">
{items.map(item => (
<li
onClick={() => onItemSelect(item)}
key={item[valueProperty]}
className={
item === selectedItem ? "list-group-item active" : "list-group-item"
}
>
{item[textProperty]}
</li>
))}
</ul>

但是对于select和option，我不知道怎么做。

Answer 1

这是因为您没有将函数传递给ListGroup组件

export default function Main(props) {
...
<ListGroup items={categories} />

但是你叫它on change

function ListGroup(props) {
...
<select
value=""
id="category"
name="category"
onChange={() => onItemSelect()}
>

试试这个

<ListGroup items={categories} onItemSelect={handleCategorySelect} />

你可以这样把select的值传递给父组件:

function ListGroup({ items, onItemSelect }) {
function handleItemChange(e) {
onItemSelect(e.target.value);
}

return (
<div>
<select onChange={handleItemChange}>
{items.map((item) => <option key={item.name}>{item.name}</option>)}
</select>
</div>
);
}
function Main() {
const items = [
{ name: 'apple' },
{ name: 'milk' },
{ name: 'bread' },
{ name: 'cheese' }
];

function handleListSelect(val) {
console.log(`I selected ${val}`);
}

return (
<div>
<ListGroup items={items} onItemSelect={handleListSelect} />
</div>
);
}
function App() {
return (
<div>
<Main />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>