reactjs - 未定义的参数传递给自定义反应钩子中的 fn

Question

我正在使用自定义钩子打开一个将执行不同操作的模式。

useSongUtils使用自定义钩子方法打开和关闭模态即时openModal消息closeModal：

export const useSongUtils = () => {
  const [isEditing, setIsEditing] = useState(false);

  const openModal = ({ cellData }) => {
    // outputs undefined
    console.log('cell data is', cellData);
    setIsEditing(true);
  };

  const closeModal = () => {
    setIsEditing(false);
  };

  return {
    closeModal, isEditing, setIsEditing, openModal,
  };
};

然后将返回的对象导​​入到我的组件中，在那里我有一个用于VirtualTable呈现一些操作链接的方法。

单元格数据是一个 id，它在方法中正确显示optionsRender（两个链接都有效 - 我得到了 id）。但是，想法是单击Button元素，调用openModal方法 fromusesongUtils并设置isEditing为 true。这样可行。

但是，我也试图cellData在方法中获取参数，openModal但它不起作用。undefined如果我尝试的话，我会得到console.log。

  // SongList.js

  const optionsRender = ({ cellData }) => (
    <div className='songs-list__options'>
      <Link to={`/songs/${cellData}/edit`}>
        <Icon name='edit' style={{ margin: '0 .2rem .2rem 0' }} />
      </Link>
      <a rel='noreferrer' target='_blank' href={`localhost/client/song/${cellData}`}>
        <Icon name='play' style={{ margin: '0 .2rem' }} />
      </a>
      {cellData} // I can see the data!!
      // im trying to pass cellData to openModal 
      <Button size='tiny' className='ui button' fluid icon='setting' circular onClick={() => openModal(cellData)} />
    </div>
  );

  const {
    closeModal, isEditing, openModal,
  } = useSongUtils();

标签： reactjsreact-hooks