为什么我的函数会出现“不是函数”错误？

Question

我构建这个手风琴组件已经有几天了，我遇到了一个问题，但我一直无法解决该问题。

import { useState } from "react";
import PropTypes from "prop-types";
import './CbdsAccordion.scss';

const CbdsAccordion = ({
  items,
  multiple = false
}) => {

  const [active, setActive] = useState(0);
  const [visibility, setVisibility] = useState(false);

  const isActive = () => (multiple ? visibility : active);

  const toggleVisibility = ({onToggle}) => {
    setVisibility((visible) => !visible);
    onToggle();
  };

  return (
    <div className='cbds-c-accordion'>

      {items.map((item, index) => (
        <div className={`card ${isActive() ? "accordion-active" : ""}`}
          key={index}
          active={active === index}
          multiple={multiple}
          onToggle={() => setActive((active => active === index ? '' : index))}
        >
          <div className='card-header' onClick={toggleVisibility}>
            {item.accordionLabel}
            <span className='accordion-icon'>+</span>
          </div>
          <div className='card-body'>
            {item.accordionPanel}
          </div>
        </div>
      )
      )}
    </div>
  )
}


CbdsAccordion.propTypes = {
  multiple: PropTypes.bool,
  active: PropTypes.bool
};

CbdsAccordion.defaultProps = {
  multiple: false,
  active: false
};

export default CbdsAccordion

我尝试将“onToggle”函数包含在组件开头的 props 中、组件末尾的默认 props 中以及 .map props 内部。每次我尝试使用它时，都会收到一条错误消息，告诉我它不是一个函数，或者出现一条代码提示，告诉我它的值已声明但从未使用过。有人能给我一些启发吗？谢谢你。

Answer 1

您使用地图内的 div 作为组件，但它们只是 div，因此，它们没有此类“onToggle”、“multiple”或“active”道具。

我建议您将地图内的所有 HTML 抽象到另一个组件中，该组件实际接收该道具并按预期使用它。

然后，使用新组件来处理手风琴项的行为。

地图内的内容应类似于：

<AccordionItem key={`accordion-item-${index}`} onToggle={() => setActive((active => active === index ? '' : index))} active={active === index} multiple={multiple} />

顺便说一下，使用索引作为映射键并不是一个好的做法。如果您有多个地图，则可能会使用相同的键生成多个项目。键在整个页面中应该是唯一的。