Как использовать переменную из Const в хуке useEffect? Реакция JS

Question

РЕДАКТИРОВАТЬ : ваше решение сработало, но теперь в моем раскрывающемся списке не отображается то, что выбрано, если только оно не выбрано дважды, например:

Здесь я выбрал «Здравоохранение», но в раскрывающемся списке по-прежнему написано «Выберите отрасль»

Здесь я во второй раз выбрал «Здравоохранение» и теперь показывает, что он выбран, это происходит со всеми вариантами раскрывающегося меню

---

У меня есть выпадающее меню, из которого я могу выбрать опцию, которая сохраняет опцию в переменной. Я хочу использовать эту переменную, чтобы изменить маршрут выборки, используемый в моем хуке useEffect, чтобы найденные данные были отфильтрованы для конкретной отрасли c. Как бы я это сделал? Есть ли более простой способ фильтрации сопоставленных данных, чем изменение адреса выборки?

Это мой код:

import React, {useState, useEffect} from "react";
import { AgGridReact } from "ag-grid-react";
import { Dropdown } from "semantic-ui-react";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css"; 


// Data Table
export default function Table() {

    const[rowData, setRowData] = useState([]);

    const columns = [
        { headerName: "Name", field: "name", sortable: true},
        { headerName: "Symbol", field: "symbol", sortable: true},
        { headerName: "Industry", field: "industry", sortable: true},
    ];

    const searchIndustry = (event, {value}) => {
      let industryChoice = value;
      // I want to use this variable 
      console.log(industryChoice);
    }

    const DropdownSearchSelection = () => (
      <Dropdown
        placeholder="Select Industry"
        search
        selection
        options={industryOptions}
        onChange={searchIndustry}
      />
    );

    useEffect(() => {
      // To change this address
        fetch(`http://131.181.190.87:3000/stocks/symbols${industryChoice}`)
        .then(res => res.json())
        .then(data => 
            data.map(stock => {
                return {
                    name: stock.name,
                    symbol: stock.symbol,
                    industry: stock.industry,
                };
            })
        )
        .then(stock => setRowData(stock));
    }, []);

    const industryOptions = [
        { key: "as", value: "", text: "View All Industries" },
        { key: "dc", value: "?industry=consumer%20discretionary", text: "Consumer Discretionary" },
        { key: "ds", value: "?industry=consumer%20staples", text: "Consumer Staples" },
        { key: "en", value: "?industry=energy", text: "Energy" },
        { key: "fi", value: "?industry=einancials", text: "Financials" },
        { key: "hc", value: "?industry=health%20care", text: "Health Care" },
        { key: "in", value: "?industry=industrials", text: "Industrials" },
        { key: "it", value: "?industry=information%20technology", text: "Information Technology" },
        { key: "ma", value: "?industry=materials", text: "Materials" },
        { key: "re", value: "?industry=real%20estate", text: "Real Estate" },
        { key: "ts", value: "?industry=telecommunication%20services", text: "Telecommunication Services" },
        { key: "ut", value: "?industry=utilities", text: "Utilities" },
      ];

  return (
    <div className="filter">
        <div>
            <input type="text" id="searchBox" placeholder="Filter..."/>
            <DropdownSearchSelection />
            <br/>
        </div>

        <div className="ag-theme-balham" >
            <AgGridReact
                columnDefs={columns}
                rowData={rowData}
                pagination={true}
                paginationPageSize={11}
            />
        </div>
    </div>

  );
}

Спасибо за помощь! :)

Answer 1

Сначала вам нужно будет сохранить выбранную опцию из Dropdown в состояние вашего компонента.

const[industryChoice, setIndustryChoice] = useState();

А по вашему searchIndustry методу

const searchIndustry = (event, {value}) => {
  setIndustryChoice(value);
}

И затем Вы добавляете searchIndustry как часть массива зависимостей, который будет извлекать данные на основе состояния industryChoice, и это будет срабатывать при каждом обновлении значения industryChoice.

useEffect(() => {
  // To change this address
    fetch(`http://131.181.190.87:3000/stocks/symbols${industryChoice}`)
    .then(res => res.json())
    .then(data => 
        data.map(stock => {
            return {
                name: stock.name,
                symbol: stock.symbol,
                industry: stock.industry,
            };
        })
    )
    .then(stock => setRowData(stock));
}, [industryChoice]);

Что касается дополнительной проблемы, которую вы подняли, вы должны связать значение состояния industryChoice с Dropdown.

<Dropdown
   placeholder="Select Industry"
   search
   selection
   options={industryOptions}
   onChange={searchIndustry}
   value={industryChoice}
/>