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

Question

我想要做的是在“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>
        );
      })} ```

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