Блог

Я пытаюсь показать, какие значения я выбираю из опции выбора компонента, который ранее был заполнен с помощью крючка выбора; ( не разрешено использовать библиотеку выбора реакции) Моя проблема заключается в том, что я выбираю его в первый раз, мне возвращается пустой массив; заполнение первым выбранным значением при выборе во второй раз. При каждом последующем выборе заполняйте массив значением предыдущего действия

Вот соответствующий код:

 const valueTemp = useSelector((state) => state.temperaments)

const [input, setInput] = useState({
    name: "",
    height_min: "",
    height_max: "",
    weight_min: "",
    weight_max: "",
    life_min: "",
    life_max: "",
    image: "",
    temperament: [],
 })

 var arrTemps=[];

  function showValues(){
    for(var i = 0; i < input.temperament.length; i  ){
      for(var j=0; j < valueTemp.length;j  ){
        if(parseInt(input.temperament[i])===valueTemp[j].id){
          arrTemps.push(valueTemp[j].name)
        }
      }
    }
    return arrTemps;
  }

var showMe="" ;
  function handleSelect(e){  
    setInput({
        ...input, temperament:[...input.temperament, e.target.value ]
    })  
    showMe=showValues() 
    console.log(showMe) 
    document.getElementById('mostrame').innerText=showMe;
  }
<select className={style.orderLarge} onChange={handleSelect}>
   <option value="">Temperaments:</option>
     {
       valueTemp.map((e) => (
         <option key={e.id} value={e.id}>{e.name}</option>              
       ))
     }
</select>
      
 <div id="mostrame"style={{color:'burlywood'}}>Temperamentos:</div>
 

Я был бы очень признателен вам за помощь! С уважением заранее!

Я не совсем понимаю, для чего вы делали все эти логические циклы. Насколько я понял, вам просто нужна была история вашего выпадающего списка. Я добавлю свою версию вашего кода.

Ваш выбор был неконтролируемым элементом. Я добавил value это, так что теперь react контролирует это. Ваша история History: {[...input.temperament]} доступна после выбора. Выбранное значение является последним элементом в массиве. Вместо document.getElementById('mostrame').innerText=showMe; этого вы можете напрямую использовать последнее выбранное значение, как это сделал я. Вам не рекомендуется получать доступ к элементам DOM, как вы это делаете. Отобразите название выбранного элемента, как показано на рисунке. Все работает, потому что я преобразую выбранное значение в ЧИСЛО. При выборе элемента возвращается значение в виде строки. Вам нужно преобразовать это в число, если вы используете число. temperament: [...input.temperament, e.target.value] . Добавление преобразует строку в число.

 import React, { useState } from 'react';

export default function App() {
  const valueTemp = [
    { id: 1, name: 'abc' },
    { id: 2, name: 'efg' },
    { id: 3, name: 'hij' }
  ];

  const [input, setInput] = useState({
    temperament: []
  });

  function handleSelect(e) {
    setInput({
      ...input,
      temperament: [...input.temperament,  e.target.value]
    });
  }

  return (
    <>
      <select
        onChange={handleSelect}
        value={input.temperament[input.temperament.length - 1]}
      >
        <option value="">Temperaments:</option>
        {valueTemp.map(e => (
          <option key={e.id} value={e.id}>
            {e.name}
          </option>
        ))}
      </select>
      <div>History: {[...input.temperament]}</div>
   <div>
    History Values: 
    {input.temperament.map(i => valueTemp.find(v => v.id === i)?.name ", 
     ")}
  </div>
  <div>Selected value =
  {
    valueTemp.find(
      v => v.id === input.temperament[input.temperament.length - 1]
    )?.name
  }</div>
    </>
  );
}