Блог

Мне удалось выполнить поисковый ввод, позволяющий выполнять поиск по названию и категории проекта из таблицы antd, но исходные данные {DataSource} не загружаются с данными в dataLog (не уверен, что это из-за запроса AJAX) и, следовательно, не загружаются в таблицу, данные будут толькобудет отображаться при выполнении первого поиска в этом случае, вот мой код:

 const ListLogs = () => {
  const [logs, setLogs] = useState([]);
  const [search, setSearch] = useState("");
  // const [latestFive, setLatestFive] = useState([]);
  const [value, setValue] = useState("");
  const timeAgo = (prevDate) => {
    const diff = Number(new Date()) - prevDate;
    const minute = 60 * 1000;
    const hour = minute * 60;
    const day = hour * 24;
    const month = day * 30;
    const year = day * 365;
    switch (true) {
      case diff < minute:
        const seconds = Math.round(diff / 1000);
        return `${seconds} ${seconds > 1 ? "seconds" : "second"} ago`;
      case diff < hour:
        return Math.round(diff / minute)   " minutes ago";
      case diff < day:
        return Math.round(diff / hour)   " hours ago";
      case diff < month:
        return Math.round(diff / day)   " days ago";
      case diff < year:
        return Math.round(diff / month)   " months ago";
      case diff > year:
        return Math.round(diff / year)   " years ago";
      default:
        return "";
    }
  };

  const getAllLogs = async () => {
    try {
      const response = await fetch("http://localhost:5000/logs/");
      const jsonData = await response.json();
      setLogs(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };

  const expandedRowRender = () => {
    const columns = [
      { title: "Date", dataIndex: "date", key: "date" },
      { title: "Name", dataIndex: "name", key: "name" },
      {
        title: "Status",
        key: "state",
        render: () => (
          <span>
            <Badge status="success" />
            Finished
          </span>
        ),
      },
      { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
      {
        title: "Type",
        dataIndex: "operation",
        key: "operation",
        render: () => {
          return (
            <div>
              <Tag color="green">CREATE</Tag>
              <Tag color="gold">UPDATE</Tag>
              <Tag color="red">DELETE</Tag>
            </div>
          );
        },
      },
    ];
    const data = [];
    for (let i = 0; i < 3;   i) {
      data.push({
        key: i,
        date: "2014-12-24 23:12:00",
        name: "This is production name",
        upgradeNum: "Upgraded: 56",
      });
    }
    return <Table columns={columns} dataSource={data} />;
  };

  const dataLog = [];
  for (let i = 0; i < logs.length; i  ) {
    dataLog.push({
      key: i,
      category: <Tag color="default">{logs[i].category}</Tag>,
      title: logs[i].title,
      id: logs[i].id,
      lastUpdated:
        new Date(logs[i].last_updated).toLocaleString()  
        " "  
        timeAgo(new Date(logs[i].last_updated).getTime()),
    });
  }
  const [dataSource, setDataSource] = useState(dataLog);
  console.log("dataSource: ", dataSource);
  console.log("dataLog: ", dataLog);

  const columns = [
    {
      title: "Category",
      dataIndex: "category",
      key: "category",
    },
    {
      title: "Title",
      dataIndex: "title",
      key: "title",
    },
    { title: "ID", dataIndex: "id", key: "id" },
    { title: "Last Updated", dataIndex: "lastUpdated", key: "lastUpdated" },
  ];

  useEffect(() => {
    setDataSource(dataLog);
    getAllLogs();
  }, []);

  return (
    <Fragment>
      <div>
        <header className="headerPage">
          <h1> Logs </h1>
        </header>
      </div>
      <div className="container">
        <Input.Search
          placeholder="Input search text"
          value={value}
          onChange={(e) => {
            const currValue = e.target.value;
            setValue(currValue);
            const filteredData = dataLog.filter(
              (entry) =>
                entry.title.toLowerCase().includes(currValue.toLowerCase()) ||
                entry.category.props.children
                  .toLowerCase()
                  .includes(currValue.toLowerCase())
            );
            console.log("filtered Data: ", filteredData);
            setDataSource(filteredData);
          }}
          // allowClear
          // onChange={(e) => setSearch(e.target.value)}
          // style={{ width: 200, float: "right" }}
        />

        <Table
          bordered
          className="components-table-demo-nested"
          onRow={(i) => ({
            onClick: (e) => {
              history.push(
                `/admin/viewLog/${i.id}/${i.category.props.children}`
              );
            },
          })}
          columns={columns}
          // expandable={{ expandedRowRender }}
          dataSource={dataSource} //tried {dataSource ? dataSource: dataLog} does not work as well
          size="small"
          pagination={false}
        />
      </div>
    </Fragment>
  );
};
export default ListLogs;
  

Пожалуйста, просветите меня для этого! Спасибо

Краткий ответ: когда мы вызываем setDataSource(dataLog) внутри useEffect-хуков для первоначального рендеринга (монтирования), который сохранит пустой массив в dataSource переменной, который можно использовать для отображения значка пустого списка или загрузки, нам нужно снова установить источник данных при извлечении данных, чтобы мы могли использовать другой хук useEffect для logs переменной состояния иустановите в нем источник данных.

 useEffect(() => {
    setDataSource(dataLog);
}, [logs]);
  

 useEffect(async () => {
    await getAllLogs();
}, []);