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

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

const [marketEstimateDataBCAssets, setmarketEstimateData] = useState([{名称:伦巴第"，prevgroupinputrate: 0.01,currgroup 输入率:0.02，mktratedelta:0.03，mktrateestimate: 0.04},{名称:其他担保"，prevgroupinputrate: 0.01,currgroup 输入率:0.02，mktratedelta:0.033，mktrateestimate: 0.04},{名称:不安全"，prevgroupinputrate: 0.01,currgroup 输入率:0.02，mktratedelta:0.0333，mktrateestimate: 0.04}]);返回 ({marketEstimateDataBCAssets.map((item, key) => {返回 (<段>
{item.name}</div>
{item.prevgroupinputrate}</div>
{item.currgroupinputrate}</div><输入值={item.mktratedelta}onChange={e =>{const newArr = marketEstimateDataBCAssets.map(el => {if (el.name === item.name) {返回 { ...el, mktratedelta: parseFloat(e.target.value) };}返回 el;});控制台.log(newArr);返回 setmarketEstimateData([...newArr]);}}/>
{marketEstimateDataBCAssets[key].mktrateestimate}</div></段>);})} ```

解决方案

你应该试试这样 代码.这只是一个开始，您可以从那里继续自己.您应该找到一种方法来管理您的受控 input.更多阅读 非受控组件 和 受控组件在反应.在 javascript 中查看 parseFloat.

返回 (<>{marketEstimateDataBCAssets.map((item, key) => (<div 键={item.name}>{/* 让我们的名字是唯一的 */}
{item.name}</div>
{item.prevgroupinputrate}</div>
{item.currgroupinputrate}</div><输入值={item.mktratedelta}onChange={e =>{const newArr = marketEstimateDataBCAssets.map(el => {if (el.name === item.name) {返回 {...埃尔，mktratedelta: parseFloat(e.target.value),mktrateestimate: (parseFloat(e.target.value) + item.currgroupinputrate).toFixed(4)};}返回 el;});控制台.log(newArr);返回 setmarketEstimateData([...newArr]);}}/>
{item.mktrateestimate}</div>}</div>))}</>);

what I am trying to do is to display the addition of "currgroupinputrate" and "mktratedelta" in "mktrateestimate" I wanted to start small so I tried to enter something in "mktratedelta" input field ,this input should be then displayed in mktrateestimate but its not displaying the input in mktratedelta. How to fix this and what would be the right approach ?

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>
        );
      })} ```

解决方案

You should try something like this code. It just the start you can carry on yourself from there. You should find a way to manage your controlled input. For more read Uncontrolled Components and Controlled Components in react. check out parseFloat in javascript.

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>
      ))}
    </>
  );