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

Я новичок в реакции / хуках. У меня проблемы с обновлением поиска в 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 */
  );
}

reactjs fetch react-hooks use-state use-effect
person Jane Doe    schedule 15.04.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

}, []);

to 

}, [industrySelection]);

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

person HermitCrab    schedule 15.04.2020

arrow_upward
1
arrow_downward

Хук с пустым массивом зависимостей является синонимом 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]);
person Drew Reese    schedule 15.04.2020