Tony's questions

我是 Typescript React 的新手，我试图创建两个从属选择框来从 API 中获取数据，但遇到了一点困难。当我在类别中选择颜色时，我只希望在产品下拉菜单中选择颜色，但我也得到了所有其他产品，而且它在一个选项中水平显示所有颜色。这是我到目前为止尝试过的方法。

我的 MongoDB 结构

  "_id": {
    "$oid": "679a70442a02723a1ad65e5d"
  },
  "categoryName": "Colours",
  "productName": [
    {
      "productName": "Red"
    },
    {
      "productName": "Blue"
    },
    {
      "productName": "Yellow"
    },
    {
      "productName": "Green"
    }
  ],
  "productQuantity": 90,
  "ordUpdated": {
    "$date": "2025-01-29T18:15:32.969Z"
  },
  "isInStock": false,
  "_class": "com.softoffice.portal.model.OrderDTO"

打字稿

export const DependentDropdown = () => {
  const [selectedCateogary, setSelectedCategory] = useState('');
  const [selectedProd, setSelectedProd] = useState([]);

  const { data } = useQuery({
    queryKey: ["ordlist"],
    queryFn: () => fetch("http://localhost:8080/portal")
      .then((res) => res.json())
  })

  const products = data?.map((row: any) => ({
    productName: row.productName?.map((p: { productName: string; }) => p.productName)
  }))

  const handleChange = (id:string) => {
    const pd = products.filter((c: any) => c.categoryName === id);
    setSelectedProd(pd);
  }

  return (
    <div>
      <InputLabel id="demo-simple-select-label">Category</InputLabel>
      <select className='select' onChange={(e) => handleChange(e.target.value)} >
    <option>Select Category</option>
    {data?.map((row: { categoryName: any }) => (
      <option>{row.categoryName}</option>
    ))}
      </select>

      <InputLabel id="demo-simple-select-label">Product</InputLabel>
      <select className='select' >
    <option>Select Product</option>
    {data?.map((row: { productName: any }) => (
      <option>{row.productName?.map((p: { productName: string; }) => p.productName)}</option>
    ))}
      </select>
    </div>
  );
}

我正在尝试运行一个简单的搜索查询，但它返回一个空数组，数据库中大约有三条记录。我还有其他查询，它们都运行正常。有人能给我指出正确的方向吗？

模型

@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Document(collection = "order")
public class OrderDTO {
    
    @Id
    private String ordId;
    private List<Category> categoryName;
}

存储库

@Repository
public interface OrderRepository extends MongoRepository<OrderDTO, String> {

    @Query("{'categoryName': {'$regex': ?0 }})")
    public List<OrderDTO> findByCategoryName(String categoryName);
}

服务

public List<OrderDTO> searchOrderByCategoryName(String categoryName){
    return or.findByCategoryName(categoryName);
    }
    

控制器

@RestController
@RequestMapping("/portal")
@CrossOrigin(origins = "http://localhost:3000")
public class OrderController {

    @Autowired OrderService os;
    
    @GetMapping("/search/{categoryName}")
    public List<OrderDTO> searchOrderByCategoryName(@PathVariable(value = "categoryName") String categoryName) {
    return os.searchOrderByCategoryName(categoryName);
}

数据库

    {
  "_id": {
    "$oid": "678ed41ceac5b05ec1a2dea8"
  },
  "categoryName": [
    {
      "categoryName": "N"
    }
  ],
  "productName": [
    {
      "productName": "9999999"
    },
    {
      "productName": "888888"
    },
    {
      "productName": "77777777"
    },
    {
      "productName": "55555555"
    }
  ],
  "productQuantity": 90,
  "ordUpdated": {
    "$date": "2025-01-20T22:54:20.729Z"
  },
  "isInStock": false,
  "_class": "com.softoffice.portal.model.OrderDTO"
}

我对 Typescript 和 React 还很陌生，我创建了一个尽可能简单的待办事项列表。到目前为止，我可以添加、显示和删除一个项目，但我无法编辑它。我可以单击行，正确的文本会出现在文本框中，但我无法保存它。我希望有人能给我指明正确的方向。

import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState(['']);
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState<string>(task);

  
  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  const handleEditSubmit = (e:any) => {
    let text = e.target.value;
    setEditText(text);
    console.log(editText);
  }

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    const selectedTask = taskList.find((_, i) => i === index);
    const unquoted = JSON.stringify(selectedTask).replace(/"/g, "");
    setTask(unquoted);
  };

  return (
    <Box>
      {isEditing ? (
    <>
      <TextField
        label="Edit Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={(e) => handleEditSubmit}>
        Submit Edit
      </Button>
    </>
      ) : (
    <>
      <TextField
        label="New Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={handleSubmit}>
        Submit
      </Button>
    </>
      )}
      <ol>
    {taskList.map((task, index) => (
      <li key={index}>
        <span>{task}</span>
        <button onClick={() => handleDelete(index)}>Delete</button>
        <button onClick={() => handleEdit(index)}>Edit</button>
      </li>
    ))}
      </ol>
    </Box>
  );
};