Как реализовать этот процесс? React.js

У меня есть пользователь с двумя параметрами (имя пользователя и группы пользователей)

У меня есть страница, которая обновляет моего пользователя, изменяя имя пользователя и обновляя группы это выглядит как: enter image description here

Проблема в том, что я не могу выделить группы, мне нужно выбрать обновление.

const AddUser = props =>{
 
  let editing = false;
  let initialUsername = "";
  const[initialGroups, setInitialGroups] = useState([])


  useEffect(()=>{
    retrieveGroups();
    
  },[])

  const retrieveGroups = () => {
    BackendService.getAllGroups()
    .then(response => {
      setInitialGroups(response.data);
    })
    .catch(e => {
      console.log(e);
    });
  }
  


  const[username, setUsername] = useState(initialUsername);
  const[groups, setGroups] = useState(initialGroups);
  const[submitted, setSubmitted] = useState(false);



  const onChangeUsername = e => {

    const username = e.target.value;
    setUsername(username);

  }

  const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }
  const saveUser = () => {
    var data = {
      username: username,
      groups: groups,
      complited: false,
    }
    
    BackendService.editUser(
      props.location.state.currentUser.id,
      data)
      .then(response=>{
        setSubmitted(true);
        console.log(response.data)
      })
      .catch(e=>{
        console.log(e);
      })
   )
  .catch(e=>{
    console.log(e);
  });

    }
  }
  
return(
  <Container>
    {submitted ? (
      <div>
        <h4>
          User Edited Successfully
        </h4>
        <Link to={"/users/"}></Link>
        Back to Users
      </div>
    ):(
      <Form>
        <Form.Group className="mb-3">
          <Form.Label>
            "Edit" User
          </Form.Label>
          <Form.Control
          type="text"
          required
          value={username}
          placeholder="Enter username here"
          onChange={onChangeUsername}
          />
          <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>
        </Form.Group>
        <Button variant="info" onClick={saveUser}>
          "Edit" User
        </Button>
      </Form>
    )}

  </Container>
)
}
export default AddUser;

В этом разделе я получаю все группы (initialGroups), которые у меня есть в базе данных:

 const[initialGroups, setInitialGroups] = useState([])
    
    
      useEffect(()=>{
        retrieveGroups();
        
      },[])
    
      const retrieveGroups = () => {
        BackendService.getAllGroups()
        .then(response => {
          setInitialGroups(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

После того, как я поместил InitialGroups в:

       <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>

И обработать в:

const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }

Что я делаю неправильно? Я не могу выделить группу, мне нужно обработать и обновить пользователя

Привет, @tarp20, не могли бы вы немного объяснить вопрос? Проблема в том, что выбранные группы не отображаются как выбранные? Или что они не сохраняются при сохранении пользователя?

DanielJ 10.04.2022 12:47

привет @DanielJ, да я даже не могу выбирать группы

tarp20 10.04.2022 12:52

Вместо: value={initialGroups}, пожалуйста, посмотрите, имеет ли вообще value={groups} значение. Кроме того, пожалуйста, сделайте рендер из groups (вместо: initialGroups.map).

jsN00b 10.04.2022 12:53

@ jsN00b привет, когда я перешел на value={groups}, я смог выбирать нужные мне группы. а если поменять на groups.map - все группы отчаялись

tarp20 10.04.2022 13:01

Ладно, думаю, я понял. В Array.from() обратный вызов выбирает только значение. Попробуйте установить опцию так: <option key={group.id} name={group.name} value={group.id} >{group.name}</option>. И я надеюсь, что console.log(e) также покажет name. Затем в обратном вызове мы можем попробовать: (v) => ({name: v.name, id: v.value});

jsN00b 10.04.2022 13:03

@ jsN00b теперь после выбора одной группы исчезают все группы

tarp20 10.04.2022 13:50

Понятно. Давайте попробуем больше изменений. 1) По декларации: const[groups, setGroups] = useState(initialGroups.map(x => ({...x, checked: false;})));. 2) В onChangeGroups попробуйте: setGroups(prev => {const curr = [...prev].map((ob, idx) => { const selectedValues = Array.from(e.currentTarget.selectedOptions, (v) => v.value); if (selectedValues.includes(ob.id)) { ob.checked = !prev[idx].checked; }; return ob; }); return curr; }); И добавьте selected={group.checked} в <option>

jsN00b 10.04.2022 14:24
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
3
7
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я хотел бы внести следующие предложения:

  • Вам не нужно использовать «initialGroups» в качестве переменной состояния. У вас уже есть переменная 'groups', которая может получить начальное значение.
const [groups, setGroups] = useState([]);
  • Вы можете напрямую установить переменную 'groups' после получения данных.
        BackendService.getAllGroups()
          .then(response => {
            setGroups(response.data);
        })
  • Вы должны передать «группы» в реквизит «значение» в компоненте «Форма» вместо «initialGroups» (а затем сопоставить его).
          <Form.Control
            as="select"
            multiple 
            value={groups}
            onChange={onChangeGroups}
          >
          {groups.map(group => (
            <option key={group.id} value={group.id}>
              {group.name}
            </option>
          ))}
          </Form.Control>

Надеюсь это поможет!

Другие вопросы по теме