单击 returns 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 函数存储在内存中。这意味着您正在保留对不存在的东西的引用，并期望在使用回调 prop 渲染组件时使用它。

组件的每个实例都应该有自己的函数。要修复它，请将函数声明移到组件中。像这样：

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.

如果这不能解决您的问题，那么您实施 Storybook 的方式有问题。就像一个缺失的上下文。

单击 returns null 而不是对象

On click returns null instead of an object

callback

reactjs

storybook