Question

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

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

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 调用 usesongUtils 方法并将 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();

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

0 个答案: