resolving error message "react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function"

Question

我不知道为什么，但是当我更改 select 或 ."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 是：

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 和选项我不知道该怎么做。

Answer 1

是因为你没有把函数传给ListGroup组件

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

但是你在更改时调用它

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>

resolving error message "react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function"

resolving error message "react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function"

javascript

error-handling

reactjs