Блог

Главная - Вопросы по программированию - Выпадающий список ReactJS обновляется

Выпадающий список ReactJS обновляется

#javascript #reactjs

#javascript #reactjs

Вопрос:

В настоящее время я работаю над проектом react, который включает в себя использование выпадающего списка с учетными записями. Проблема в том, что страница обновляется каждые несколько секунд, а выпадающий список очищается и на долю секунды становится пустым при этом обновлении. Есть ли способ, которым я могу это решить? Выпадающий список хорошо работает, когда параметры заданы, но в нем есть ошибки, когда я использую accounts.map для перебора каждой учетной записи. Любая помощь приветствуется!

 import React from "react";
import "./style.css";

export default function App() {
  let accounts = ["email1","email2","email3"];
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <select
        type="select"
        name="orderState"
        id="orderState"
      >       
      {accounts.map(account => (
        <option>{account}</option>
      ))}
      </select>
    </div>
  );
}

Комментарии:

1. Возможно, я поторопился с ответом: The problem is that the page refreshes every few seconds — что это значит?

2. Таким образом, страница в основном обновляет информацию из серверной части, так что, если есть какие-либо обновления или что-то еще, вам не нужно вручную перезагружать страницу. Он не перезагружает страницу полностью, а просто обновляет информацию. Проблема заключается в том, что при этом обновлении раскрывающийся список также обновляется, поэтому раскрывающийся список обновляется.

3. В этом случае вам, вероятно, просто нужно поддерживать состояние выбранного выпадающего списка, см. Мой Ответ ниже.

Ответ №1:

Вам необходимо сохранить выбранное значение в состоянии:

 let accounts = ["email1", "email2", "email3"];
export default function App() {
  const [selected, setSelected] = React.useState();
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <select
        type="select"
        name="orderState"
        id="orderState"
        onChange={e => setSelected(e.target.value)}
      >
        <option>Select an account</option>
        {accounts.map(account => (
          <option selected={account === selected}>{account}</option>
        ))}
      </select>
    </div>
  );
}

Работает stackblitz