Question

后端和前端之间的同步对我来说是陌生的，而且不仅仅如此。

问题

我有一个对象的json。每个对象看起来都像这样：{“ id”：number，“ status”：boolean}。

正面：一个按钮和一个图像。按下按钮，需要更改图像。图像取决于对象状态。（每次单击按钮都会在true和false之间更改）。

每次单击按钮，我都会更改后端中的数据（API调用，用于更改具有匹配ID的对象的状态）。

问题是，在我的代码中，只有第一次（并且很快）可以工作，它确实会更改状态，并且要感谢flag（“ change”），useEffect重新呈现页面和新图像显示。第二次花费的时间很多，并且该组件似乎没有在等待API性能（甚至认为有一个“等待”），并且重新渲染了页面而图像没有变化。

为什么每个对象第一次都能快速工作而第二次却没有呢？即使我每次都抓取相同的对象？

用于更改状态的后端代码：

const data: any[] = require("./data.json");

app.get("/api/change/:id", (req) => {
  const findTheElement = data.find(
    (element) => element.id == req.params.id
  );
  findTheElement.status = !findTheElement.status;
});

前端

  const [items, setItems] = useState([]);
  const [changed, setChanged] = useState(false);

....

const changeStatus = async (id: number) => {
    let response = await flipStatus(id); //calling a functions(other file) that calls the api - works
    setChanged((prev) => !prev); //flag for "something change, re- render"
  };


  useEffect(() => {
      //calling a functions(other file) that calls the api - works .bring the list of items from back 
      //to front
         response = await getItems();  
         setItems(response);
      }
  }, [changed]);


 return (items.map((item) => (
          <img
          alt="something"
          src={getImageByStatus(item.status)}
              />
         <button onClick={() => changeStatus (item.id)}>
                  {item.status=== "true"
                    ? "false"
                    : "true"}
                </a>)

在后端更改数据后重新渲染

0 个答案: