React Redux 问题传递状态值

Question

我试图显示我从组件的 select 选项中选择了哪些值，该组件之前已使用 useSelector hook 填充；（不允许使用 React Select 库）我的问题是第一次 select 它返回了一个空数组；第二次 selected 时填充第一个选择的值。随后的每个 select，用前一个操作值

填充数组

相关代码如下：

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>

非常感谢您的帮助！提前问好！

Answer 1

我不确定您为什么要执行所有循环逻辑。据我了解，您只需要下拉列表的历史记录。我将添加我的代码版本。

你的 select 是一个不受控制的因素。我在上面添加了 value 所以现在反应控制它。您的历史记录 History: {[...input.temperament]} 在 select 之后可用。 selected 值是数组中的最后一项。您可以像我所做的那样直接使用最后一个 selected 值，而不是 document.getElementById('mostrame').innerText=showMe;。不建议您像现在这样访问 DOM 元素。如图所示显示您的 selected 项目名称。一切正常，因为我正在将 selected 值转换为数字。当您 select 返回的项目值是一个字符串。如果您使用数字，则需要将其转换为数字。 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>
    </>
  );
}

React Redux 问题传递状态值

React Redux issue delivering state value

html

javascript

state

reactjs

redux