React Hooks и Fetch: как обновить таблицу на основе пользовательского ввода из поиска API

Question

Я новичок в реакции / ловушках. У меня возникли проблемы с поиском обновления API на основе ввода пользователя. В настоящее время у меня есть API, который мне нужен, чтобы получить таблицу акций. Затем я нарисую эту таблицу. Я создал несколько переключателей, которые позволяют пользователю нажимать, чтобы он мог улучшить поиск по API. Я передаю значение выбранной радиокнопки обратно на URL-адрес как industrySelection, и я надеюсь, что таблица обновится из этого результата, но ничего не сделает. Может кто-нибудь объяснить, пожалуйста, как это исправить и почему?

function StockTable() {
  const [industrySelection, setIndustry] = useState("");
  const [rowData, setRowData] = useState([]);

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


  useEffect(() => {
    fetch(`http:PRIVATE/stocks/symbols/${industrySelection}`)
    .then(res => res.json())
    .then(data => 
      data.map(stocks => {
        return {
          name: stocks.name,
          symbol: stocks.symbol,
          industry: stocks.industry,
        };
      })
    )
    .then(stocks => setRowData(stocks));
  }, []);

  return (
/* Place Search Options and grab users choice */
    <div className = "userSelect">
      {
        industryChoices.map(feature => (
            <ul className = "radioULlist"> 
              <li className = "radioList">
                <input type="radio" name="radioButton" value = {feature}  
                  onChange={event => {
                    const { value } = event.target;
                    setIndustry(value);
                  }}
                />
                <label className = "radioLabel">{feature}</label>
              </li>
            </ul>
      ))}
    </div>
/* DRAW TABLE HERE */
  );
}

Answer 1

Измените последнюю строку вашего useEffect с:

}, []);

на

}, [industrySelection]);

Так что useEffect будет вызываться каждый раз, когда ваше изменение industrySelection

Answer 2

Хук с пустым массивом зависимостей является синонимом componentDidMount, он запускается только один раз, когда компонент монтируется. Хук с заполненным массивом зависимостей больше похож на componentDidUpdate, когда значение в массиве обновляется (поверхностное сравнение), вызывается обратный вызов хука.

Добавьте industrySelection к массиву зависимостей эффекта. Когда значение industrySelection изменится, эффект сработает и в итоге обновится rowData.

useEffect(() => {
  fetch(`http:PRIVATE/stocks/symbols/${industrySelection}`)
  .then(res => res.json())
  .then(data => 
    data.map(stocks => {
      return {
        name: stocks.name,
        symbol: stocks.symbol,
        industry: stocks.industry,
      };
    })
  )
  .then(stocks => setRowData(stocks));
}, [industrySelection]);

Answer 3

Второй аргумент может использоваться для определения всех переменных (размещенных в этом массиве), от которых зависит ловушка. Если одна из переменных изменяется, ловушка запускается снова. Если массив с переменными пуст, ловушка вообще не запускается при обновлении компонента, потому что ему не нужно наблюдать за какими-либо переменными. Эта ссылка очень полезна для вас https://www.robinwieruch.de/react-hooks-fetch-data

  useEffect(() => {
    fetch(`http:PRIVATE/stocks/symbols/${industrySelection}`)
    .then(res => res.json())
    .then(data => 
      data.map(stocks => {
        return {
          name: stocks.name,
          symbol: stocks.symbol,
          industry: stocks.industry,
        };
      })
    )
    .then(stocks => setRowData(stocks));
  }, [industrySelection]);