reactjs - 将函数传递给子组件

Question

当我传递一个用点击事件执行的函数时，它被执行了两次。

我已经检查过，当从 child 那里点击时，我无法执行 event.preventDefault ()，因为它没有作为参数到达。

如何传递函数使其只运行一次？

父组件
我从父级传递的函数是 handleClickSelectPrice

export const FilterForm = ({ display }) => {
  const { priceFilters } = useSelector(selectSearchFilters);
  const dispatch = useDispatch();

  const handleClickSelectPrice = (priceFilter) => {
    priceFilter.isActivated
      ? dispatch(desactivatePriceFilter({ priceFilter: priceFilter.textKey }))
      : dispatch(activatePriceFilter({ priceFilter: priceFilter.textKey }));
  };

  return (
    <>
      <div>
        <Input name='nombre' icon={<MdSearch />} />

        <Select
          options={priceFilters}
          defaultLabel='Ordenar por precio'
          fullWidth
          setOptionSelected={handleClickSelectPrice}
        />
      </div>
    </>
  );
};

子组件
我检查过 handleClickOption 的 option 参数正常

export const Select = ({ options, defaultLabel, setOptionSelected }) => {
  const [label, setLabel] = useState(defaultLabel);
  const [showOptions, setShowOptions] = useState(false);

  const handleClickOption = (option) => {
    setShowOptions(false);
    setLabel(option.label);
    setOptionSelected(option);
  };

  return (
    <>
      <div className='selected-container'>
        <div className='selected' onClick={() => setShowOptions(!showOptions)}>
          <p>{label}</p>
          <GoChevronDown />
        </div>
        <div className='select-box'>
          <div className={`options-container ${showOptions ? 'active' : ''}`}>
            {options.map((option) => (
              <SelectOption option={option} onClick={handleClickOption} />
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

Answer 1

请检查您的 index.js，您可能需要从那里删除严格模式...

  ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

尝试将其更改为

 ReactDOM.render(
        <App />,
      document.getElementById('root')
    );