如何使用映射 React 从 useState 添加 2 个键？

Posted 2023-03-16

【中文标题】如何使用映射 React 从 useState 添加 2 个键？

【英文标题】：How to add 2 keys from useState using mapping React?

【发布时间】：2020-03-03 06:57:51

【问题描述】：

我想要做的是在“mktrateestimate”中显示“currgroupinputrate”和“mktratedelta”的添加我想从小处开始，所以我尝试在“mktratedelta”输入字段中输入一些内容，然后应该显示这个输入在 mktrateestimate 但它不显示 mktratedelta 中的输入。如何解决这个问题以及正确的方法是什么？

const [marketEstimateDataBCAssets, setmarketEstimateData] = useState([
    
      name: "Lombard",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 0.02,
      mktratedelta: 0.03,
      mktrateestimate: 0.04
    ,
    
      name: "Other Secured",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 0.02,
      mktratedelta: 0.033,
      mktrateestimate: 0.04
    ,
    
      name: "Unsecured",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 0.02,
      mktratedelta: 0.0333,
      mktrateestimate: 0.04
    
  ]);


  return (
      marketEstimateDataBCAssets.map((item, key) => 
        return (
          <Segment>
            <div> item.name</div>
            <div> item.prevgroupinputrate</div>
            <div> item.currgroupinputrate</div>
            <input
              value=item.mktratedelta
              onChange=e => 
                const newArr = marketEstimateDataBCAssets.map(el => 
                  if (el.name === item.name) 
                    return  ...el, mktratedelta: parseFloat(e.target.value) ;
                  
                  return el;
                );
                console.log(newArr);

                return setmarketEstimateData([...newArr]);
              
            />
            <div> marketEstimateDataBCAssets[key].mktrateestimate</div>
          </Segment>
        );
      ) ```

【参考方案1】：

您应该尝试类似code 的方法。这只是一个开始，您可以从那里继续自己。您应该找到一种方法来管理您受控的input。更多阅读 Uncontrolled Components 和 Controlled Components 反应。在 javascript 中查看 parseFloat。

return (
    <>
      marketEstimateDataBCAssets.map((item, key) => (
        <div key=item.name>
          /* let's name is unique */
          <div> item.name</div>
          <div> item.prevgroupinputrate</div>
          <div> item.currgroupinputrate</div>
          <input
            value=item.mktratedelta
            onChange=e => 
              const newArr = marketEstimateDataBCAssets.map(el => 
                if (el.name === item.name) 
                  return 
                    ...el,
                    mktratedelta: parseFloat(e.target.value),
                    mktrateestimate: (
                      parseFloat(e.target.value) + item.currgroupinputrate
                    ).toFixed(4)
                  ;
                
                return el;
              );
              console.log(newArr);

              return setmarketEstimateData([...newArr]);
            
          />
          <div> item.mktrateestimate</div>
        </div>
      ))
    </>
  );

【讨论】：

感谢您的代码...。您能否告诉我如何将此函数放在主“return”之外，然后从“onChange”调用它，以便我可以重用该函数跨度>