React Redux 问题传递状态值

Posted 2023-02-19

【中文标题】React Redux 问题传递状态值

【英文标题】：React Redux issue delivering state value

【发布时间】：2021-11-07 08:04:58

【问题描述】：

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

相关代码如下：

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>

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

【参考方案1】：

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

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

【讨论】：

Tnx 非常感谢您的帮助 Sanish！我正在做所有这些循环逻辑，因为我在成为 Fullstacker 的道路上是个菜鸟。你的版本给我上了宝贵的一课。但仍然没有得到一组名称结果。您的代码显示了一个 id 历史...我需要一个名称历史让最终用户可以看到已选择的参数：像气质：冷漠、自信、守护者而不是 5,12.23

按照我目前的逻辑，很容易将这些值也写入历史。 input.temperament.map(i => valueTemp.find( v => v.id === i )?.name )

你说得对，Sanish。再次：谢谢。我的尊重。