ReactQuery僅在選項卡重繪時顯示

我發現自己有點難受，似乎無法在 Google 上找到答案。

我正在嘗試將 React 查詢庫與 TSX 一起使用，并在一個簡單的串列中顯示回傳的資料。然而，似乎只有離開選項卡并回傳它才能完成獲取和顯示。

這是組件

import React, { ChangeEvent, useState, ReactElement } from "react";
import { useQuery, UseQueryResult } from "react-query";
import axios from "axios";

import { API_URL } from "../../settings";

import SearchBar from "../../components/search-bar";

const Employees = (): ReactElement => {
  type Employee = Record<string, any>;

  const [name, setName] = useState("");

  function getValue(eventData: ChangeEvent<HTMLInputElement>) {
    console.log(name, "I'm the direct input");
    const e = eventData.target.value;
    setName(e);
    getEmployeesList(name);
  }

  async function getEmployeesList(name: string) {
    const { data } = await axios.get(
      API_URL   "employees?q[firstname_or_lastname_cont]="   name
    );
    console.log(data);
    return data;
  }

  const {
    data,
    error,
    isError,
    isLoading,
  }: UseQueryResult<Employee[], Error> = useQuery("employees", () =>
    getEmployeesList(name)
  );
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return (
      <div>
        `Error!
        {error?.message}`
      </div>
    );
  }
  if (data) {
    console.log(data, "I'm the query data");
  }

  return (
    <div className="findEmployees">
      <SearchBar
        placeholder=""
        value={name}
        onValueChange={(event: ChangeEvent<HTMLInputElement>) =>
          getValue(event)
        }
      />
      <div className="listContainer">
        <h1>Employees</h1>
        {data?.map((employee, index: number) => (
          <li key={employee.id}>
            {employee.firstname} {employee.lastname}
            <p>{employee.role}</p>
          </li>
        ))}
      </div>
    </div>
  );
};

export default Employees;

這是子組件

import React, {
  ChangeEventHandler,
  MouseEvent,
  ReactElement,
  ReactEventHandler,
} from "react";
import { SearchBarContainer, SearchBarInput } from "./styled-components";
import Icon from "../icon";

interface Props {
  placeholder: string;
  value: string;
  onValueChange: ChangeEventHandler<HTMLInputElement>;
}

const SearchBar = ({
  onValueChange,

  placeholder,
  value,
}: Props): ReactElement => (
  <SearchBarContainer>
    <SearchBarInput
      onChange={onValueChange}
      placeholder={placeholder}
      value={value}
    />

    <Icon color="grey700" name="search" />
  </SearchBarContainer>
);

export default SearchBar;

到目前為止我還沒有發現問題。我嘗試了一個自定義鉤子來獲取和設定資料，但這顯然沒有改變問題。如果有人有想法，我將不勝感激。

祝你有美好的一天

uj5u.com熱心網友回復：

function getValue(eventData: ChangeEvent<HTMLInputElement>) {
    const e = eventData.target.value;
    setName(e);
    console.log(name); // still you should receive previous value
    getEmployeesList(e);
  }

setState 不是同步的。它只在函式呼叫結束時更新狀態值。

uj5u.com熱心網友回復：

感謝您的投入。我實際上用自定義鉤子解決了這個問題

import React, { ChangeEvent, useState, ReactElement } from "react";
import { useQuery, UseQueryResult } from "react-query";
import axios from "axios";

import { API_URL } from "../../settings";

import SearchBar from "../../components/search-bar";

const Employees = (): ReactElement => {
  type Employee = Record<string, any>;

  const [name, setName] = useState<string>("");
  const [eData, setEData] = useState<Employee[]>([]);

  function getValue(eventData: ChangeEvent<HTMLInputElement>) {
    setName(eventData.target.value);
    getEmployeesList(eventData.target.value);
  }

  async function getEmployeesList(name: string) {
    const { data } = await axios.get(
      API_URL   "employees?q[firstname_or_lastname_cont]="   name
    );
    setEData(data);
    return data;
  }

  const {
    data,
    error,
    isError,
    isLoading,
  }: UseQueryResult<Employee[], Error> = useQuery("employees", () =>
    getEmployeesList(name)
  );
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return (
      <div>
        `Error!
        {error?.message}`
      </div>
    );
  }

  return (
    <div className="findEmployees">
      <SearchBar
        placeholder=""
        value={name}
        onValueChange={(event: ChangeEvent<HTMLInputElement>) =>
          getValue(event)
        }
      />
      <div className="listContainer">
        <h1>Employees</h1>
        {eData?.map((employee, index: number) => (
          <li key={employee.id}>
            {employee.firstname} {employee.lastname}
            <p>{employee.role}</p>
          </li>
        ))}
      </div>
    </div>
  );
};

export default Employees;

如您所見，我通過掛鉤值“eData”更改了“資料”。我注意到我的 axios 查詢是實時更新的，所以我獲取了這個條目并將其存放在一個自定義鉤子中，然后我將其映射到我的 JSX 上。以這種方式實時獲取。此外，我更新了

function getValue(eventData: ChangeEvent<HTMLInputElement>) {
setName(eventData.target.value);
getEmployeesList(eventData.target.value);

}

在第一個版本中要求少一個字母的部分。

標籤：javascript 反应 刷新 反应查询

上一篇：如何使用javascipt和jquery自定義格式化日期

下一篇：重新加載頁面并停留在當前頁面