How to add 2 keys from useState using mapping React?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/58736130/how-to-add-2-keys-from-usestate-using-mapping-react

标签

javascript

reactjs

frontend