代码之家 › 专栏 › 技术社区 › Dayvson Spacca

为什么我在react no next14应用程序中的useState不工作?

tailwind-css next.js typescript reactjs javascript

Dayvson Spacca · 技术社区 · 2 年前

我目前正在进行一个项目,现在我正在使用我发现的设计模式创建一个Select组件。实现看起来很棒,但似乎出了问题,因为useState似乎不起作用。我对Next.js/Rect还比较陌生,所以这可能是一个简单的逻辑错误。

以下是主要代码:

'use client';
import Image from 'next/image';
import { Select } from '@/components/ui/select';
import { ferramentas } from '@/libs/ferramentas';
import { useState } from 'react';
import { Check } from 'lucide-react';

export default function Ferramentas() {
  const [tool, setTool] = useState('');

  const handleSelect = (option: string) => {
    console.log(option);
    setTool(option);
  };

  return (
    <div className="ml-16">
      <Select.Root className="w-[500px]" selected={tool}>
        <Select.Content>
          {ferramentas.map((ferramenta) => (
            <Select.Option key={ferramenta.item_id} onClick={() => handleSelect(ferramenta.item_id)}>
              <div className="flex items-center gap-3">
                <Image alt={ferramenta.name} src={`https://render.albiononline.com/v1/item/${ferramenta.item_id}.png`} width={32} height={32} />
                {ferramenta.name}
              </div>
              {tool === ferramenta.item_id ? <Check /> : null}
            </Select.Option>
          ))}
        </Select.Content>
      </Select.Root>
      <h1>{tool}</h1>
    </div>
  );
}

选择根

'use client';
import { SelectProps } from '@/components/global-types';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { useState } from 'react';
import { twMerge } from 'tailwind-merge';

export default function SelectRoot({ className, children, selected, ...props }: SelectProps) {
  const [open, setOpen] = useState(false);

  return (
    <div
      className={twMerge('group rounded relative cursor-pointer h-8 m-5 px-2 flex items-center flex-row-reverse justify-between bg-white', className)}
      onClick={() => setOpen(!open)}
      {...props}
    >
      {open ? <ChevronUp className="group-hover:opacity-70" /> : <ChevronDown className="group-hover:opacity-70" />}

      {selected}

      {open && children}
    </div>
  );
}

选择所容纳之物

import { ReactNode } from 'react';

export default function SelectContent({ children }: { children: ReactNode }) {
  return <div className="absolute top-full left-0 mt-1 overflow-y-scroll h-64 rounded bg-zinc-800 p-2 w-full">{children}</div>;
}

选择选项

import { OptionProps } from '@/components/global-types';
import { twMerge } from 'tailwind-merge';

export default function SelectOption({ children, className, ...props }: OptionProps) {
  return (
    <div className={twMerge('flex items-center justify-between cursor-pointer hover:bg-zinc-700 text-white h-8 px-2 whitespace-nowrap rounded', className)}>
      {children}
    </div>
  );
}

我尝试创建一个函数来设置状态,或者直接在onClick上设置状态,但从来没有发生过,状态不会改变。

1 回复 | 直到 2 年前

GMaiolo 2 年前

问题是你通过了 onClick 道具到 SelectOption 组件,但它没有被使用。

您需要这样添加:

export default function SelectOption({ children, className, onClick, ...props }: OptionProps) {
  return (
    <div onClick={onClick} className={twMerge('flex items-center justify-between cursor-pointer hover:bg-zinc-700 text-white h-8 px-2 whitespace-nowrap rounded', className)}>
      {children}
    </div>
  );
}

或者通过以下操作直接展开道具:

<div
  className="your-current-classes"
  {â¦props}
>
  {children}
</div>