设置状态不会更新该值

Question

我对下拉菜单中的设置状态有问题。我在代码中使用了typescript。所选类别值不会更改，并且始终返回空字符串“”。我怎样才能解决这个问题？

import debounce from "lodash.debounce";
import { observer } from "mobx-react-lite";
import React, { SyntheticEvent, useContext, useState } from "react";
import {
  Dropdown,
  DropdownItemProps,
  DropdownProps,
  Form,
  InputOnChangeData,
  Popup,
} from "semantic-ui-react";
import { RootStoreContext } from "../../../app/stores/rootStore";

const regex = new RegExp("^[a-zA-Z0-9 ]+$");

interface IProps {
  loading: boolean;
}

const PurchaseDetailsFilter: React.FC<IProps> = ({ loading }) => {
  const rootStore = useContext(RootStoreContext);
  const {
    setFilter,
    itemCount,
    loadPurchaseDetails,
    categoryId,
    setCategoryId,
  } = rootStore.purchaseDetailStore;

  const { purchaseCategories } = rootStore.purchaseCategoryStore;

  const purchaseCategoriesList: any = purchaseCategories.map((data) => {
    return { key: data.id, text: data.name, value: data.id };
  });

  const categoryOptions: DropdownItemProps[] = [
    { key: "all", value: "all", text: "All" },
  ].concat(purchaseCategoriesList);

  const [selectedCategory, setSelectedCategory] = useState("");

  const [filterValid, setFilterValid] = useState(true);
  
  const f = debounce((value: string) => {
    if (value !== "" && !regex.test(value)) {
      setFilterValid(false);
      setFilter(value);
    } else {
      setFilterValid(true);
      console.log(loading);
      setFilter(value);     
      loadPurchaseDetails();
    }
  }, 500);

  const cat = debounce((value: string) => {    
    console.log(value);    
    setSelectedCategory(value as string);
    console.log(selectedCategory);
    setCategoryId((value ==="all" ? "" : value) as string);
    loadPurchaseDetails();        
  }, 500);

  const handleOnChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    { value }: InputOnChangeData
  ) => {
    f(value);
  };

  let popupMessage = "";
  if (!filterValid) {
    popupMessage = "Invalid character.";
  } else if (itemCount === 0) {
    popupMessage = "No results found.";
  }
  
  const handleSelectedCategory = (
    event: SyntheticEvent<HTMLElement>,
    {value}: DropdownProps
  ) => {      
    console.log(value);    
    setSelectedCategory(String(value));
    console.log(selectedCategory);
    setCategoryId((value ==="all" ? "" : value) as string);
    loadPurchaseDetails();    
  };

  return (
    <Form>
      <Form.Group>
        <Form.Field>
          <Popup
            trigger={
              <Form.Input
                placeholder={"Enter a filter."}
                name={"filter"}
                error={!filterValid}
                label={"Filter"}
                onChange={handleOnChange}               
                icon={"search"}
                loading={loading}
              />
            }
            content={popupMessage}
            on={"click"}
            open={!filterValid || itemCount === 0}
            position={"right center"}
          />
        </Form.Field>
        <Form.Field style={{ marginLeft: "10em" }}>
          <label>Category</label>
          <Dropdown    
            //defaultValue="All"
            //value={categoryId}     
            value={selectedCategory}
            onChange={handleSelectedCategory}      
            //defaultValue={categoryOptions[0].value}              
            placeholder="Choose an category"
            options={categoryOptions}
            selection
          />
        </Form.Field>
        <Form.Field>
          <label>Project</label>
          <Dropdown placeholder="Choose an option" />
        </Form.Field>
        <Form.Field>
          <label>Supplier</label>
          <Dropdown placeholder="Choose an option" />
        </Form.Field>
      </Form.Group>
    </Form>
  );
};

export default observer(PurchaseDetailsFilter);

Answer 1

请看下面的代码注释

const handleSelectedCategory = (
    event: SyntheticEvent<HTMLElement>,
    { value }: DropdownProps
) => {
    console.log(value); // If this value is string i.e "Hello World", then just call setSelectedCategory(value);
    setSelectedCategory(value as string); // Not required. Just call setSelectedCategory(value) if value is string.
    console.log(selectedCategory); 
    setCategoryId((value === "all" ? "" : value) as string); // Curious, where is setCategoryId froming from?
    loadPurchaseDetails();
};

Answer 2

也许你要找的是这个：

      const handleSelectedCategory = (
        event: SyntheticEvent<HTMLElement>,
        {value}: DropdownProps
      ) => {      
        console.log(value);    
        setSelectedCategory(String(value));
        console.log(selectedCategory);
        setCategoryId(String(value ==="all" ? "" : value));
        loadPurchaseDetails();      
      };

请注意，我将值更改为字符串为字符串（值）。我曾经摆弄过TypeScript，但我忘记了字符串的转换是如何工作的。您可以在这里找到更好的解释：https://stackoverflow.com/a/32607656/7467018