单击时返回null而不是对象

Question

我猜这真的很基础。我正在尝试将onClick回调添加到脚本中，而且我认为我缺少一个负责查找实际项目的值。

主脚本

import React from 'react';
import { CSVLink } from 'react-csv';
import { data } from 'constants/data';
import GetAppIcon from '@material-ui/icons/GetApp';
import PropTypes from 'prop-types';

const handleClick = (callback) => {
    callback(callback);
};

const DownloadData = (props) => {
    const { callback } = props;
    return (
        <>
            <CSVLink
                data={data}
                onClick={() => handleClick(callback)}
            >
                <GetAppIcon />
            </CSVLink>
        </>
    );
};

DownloadData.propTypes = {
    callback: PropTypes.func.isRequired,
};

export default DownloadData;

故事书代码

import React from 'react';
import DownloadData from 'common/components/DownloadData';
import { data } from 'constants/data';
import { action } from '@storybook/addon-actions';

export default {
    title: 'DownloadData',
    component: DownloadData,
};

export const download = () => (
    <DownloadData
        data={data}
        callback={action('icon-clicked')}
    />
);

因此，现在在故事书中单击此代码，我将得到null并正在寻找对象。

Answer 1

我相信您的问题正在发生，因为您的handleClick函数存储在组件外部的内存中。将函数移到组件内部，因为需要生成对于组件。这意味着您将保留对不存在的东西的引用，直到使用回调道具渲染组件为止。

const Foo = ({ callback }) => {
  // handleClick needs to be inside here
  const handleClick = callback => {
    console.log("clicked");
    callback(callback);
  };

  return <div onClick={() => handleClick(callback)}>Click me!</div>;
};

Check this example。