usestate 在react中修改后保持相同的值

Question

我有一个使用 shadcn-ui 组合框组件的 nextjs 应用程序，并且有一个值在使用 usestate 修改后应该返回到空字符串，但事实并非如此。我不明白为什么。这是代码：

    'use client';

import { Button } from '@/components/ui/button';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { cn } from '@/app/lib/utils';
import { ChevronsUpDown, Check } from 'lucide-react';
import { CrossCircledIcon } from '@radix-ui/react-icons';
import * as React from 'react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';

type ComboboxProps = {
  options: string[];
  searchPlaceholder?: string;
  paramsUpdate: string;
  height_button?: string;
  width_popover?: string;
};

export function Combobox({
  options,
  searchPlaceholder = 'Search items...',
  paramsUpdate,
  height_button,
  width_popover,
}: ComboboxProps) {
  const [open, setOpen] = React.useState<boolean>(false);
  const searchParams = useSearchParams();
  const [selectedOption, setSelectedOption] = React.useState<string>(
    searchParams.get(paramsUpdate) || '',
  );

  const { replace } = useRouter();

  const pathname = usePathname();

  const updateURLParams = (q: string) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', '1');

    if (q) {
      params.set(paramsUpdate, q);
    } else {
      params.delete(paramsUpdate);
    }

    replace(`${pathname}?${params.toString()}`);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger className="flex" asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className={cn(
            'flex-none items-center justify-between text-wrap',
            height_button,
          )}
        >
          {selectedOption
            ? options.find((option) => option === selectedOption)
            : searchPlaceholder}
          <div className="flex space-x-2">
            <CrossCircledIcon
              className="ml-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100"
              onClick={() => {
                setSelectedOption('');
                updateURLParams('');
              }}
            />
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </div>
        </Button>
      </PopoverTrigger>
      <PopoverContent className={cn('p-0', width_popover)}>
        <Command>
          <CommandInput placeholder="Search ..." />
          <CommandList>
            <CommandEmpty>Not found</CommandEmpty>
            <CommandGroup>
              {options.map((opt, i) => (
                <CommandItem
                  key={opt}
                  value={opt}
                  onSelect={(value) => {
                    setSelectedOption(value === selectedOption ? '' : value);
                    console.log(value);
                    updateURLParams(value);
                    setOpen(false);
                  }}
                  className={cn(
                    i !== options.length - 1 && 'border-b border-gray-200',
                  )}
                >
                  <Check
                    className={cn(
                      'mr-2 h-4 w-4',
                      selectedOption === opt ? 'opacity-100' : 'opacity-0',
                    )}
                  />
                  {opt}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

最重要的部分是：

            <CommandItem
              key={opt}
              value={opt}
              onSelect={(value) => {
                setSelectedOption(value === selectedOption ? '' : value);
                console.log(value);
                updateURLParams(value);
                setOpen(false);
              }}

在这种情况下，当我在同一项目中第二次单击时，值不会更改为空字符串，我可以看到 ui 更改为

searchPlaceholder

但 console.log(value) 仍然给我以前的值，为什么？

Answer 1

您需要将其设置为空字符串，而不是与上一个相同的最新值

    onSelect={(value) => {
      let newVal = value === selectedOption ? '' : value;
      setSelectedOption(newVal);
      console.log(newVal );
      updateURLParams(newVal);
      setOpen(false);
   }}