这里是如何将逻辑分为两个部分并呈现资产列表的示例

function myAwesomeComponent() {
  const [marketData,setMarketData] = useState([
    {
      id: 0,name: 'Lombard',prevgroupinputrate: 0.01,currgroupinputrate: 0.02,mktratedelta: 0.03,mktrateestimate: 0.04,},{
      id: 1,name: 'Other Secured',mktratedelta: 0.033,{
      id: 2,name: 'Unsecured',mktratedelta: 0.0333,]);

  const onChange = (asset) => (event) => {
    setMarketData((oldMarketData) => {
      const index = oldMarketData.indexOf(asset);
      const oldAsset = oldMarketData[index];
      const newMarketData = [...oldMarketData];
      newMarketData[index] = {
        ...oldAsset,mktratedelta: event.target.value,};
      return newMarketData;
    });
  };

  return (
    <>
      {marketData.map((asset) => (
        <Asset asset={asset} onChange={onChange} />
      ))}
    </>
  );
}

const Asset = ({ asset,onChange }) => (
  <Segment key={asset.id}>
    <div> {asset.name}</div>
    <div> {asset.prevgroupinputrate}</div>
    <div> {asset.currgroupinputrate}</div>
    <input value={asset.mktratedelta} onChange={onChange(asset)} />
    <div> {asset.mktrateestimate}</div>
  </Segment>
);

如果您对marketData数组中的属性名称有影响，则应考虑使用camelCase，因此

{
  id: 0,}

成为

{
  id: 0,prevGroupInputrate: 0.01,currGroupInputrate: 0.02,mktRateDelta: 0.03,mktRateEstimate: 0.04,}

您正在直接更改state。不要这样尝试这样的事情：

 return (
           <>
      {marketEstimateDataBCAssets.map((item,key) => (
        <div>
          <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> {item.mktrateestimate}</div>}
        </div>
      ))}
    </>

        );

这里有一个快速的demo。感谢@Titus指出了这个问题。

代码存在一些问题。 1.您无法对数组执行Object.keys（marketEstimateDataBCAssets是代码中的数组）；

1. 您不能直接将值分配给状态对象。

您只需删除Object.keys即可解决第一个问题；

只需创建一个函数即可将数组键值与输入值一起传递。在函数中，使用创建数组并更新索引对象的值，然后只需将新数组数据传递到setmarketEstimateData

因此代码将是：

const [marketEstimateDataBCAssets,setmarketEstimateData] = useState([
  {
    name: "Lombard",mktrateestimate: 0.04
  },{
    name: "Other Secured",{
    name: "Unsecured",mktrateestimate: 0.04
  }
]);

function updateValue(e,key) {
  let data =  setmarketEstimateData;
  data[key].mktratedelta = e.target.value;
  marketEstimateDataBCAssets.map(data);
}

{marketEstimateDataBCAssets.map(function(item,key) {
  return (
    <Segment>
      <div> {item.name}</div>
      <div> {item.prevgroupinputrate}</div>
      <div> {item.currgroupinputrate}</div>
      <input
        value={item.mktratedelta}
        onChange={e => updateValue(e,updateValue(e,key))}
      />
      <div> {item.mktrateestimate}</div>
    </Segment>
  );
}

这样的事情。

import React from 'react';

const Component = () => {

  const [marketEstimateDataBCAssets,setmarketEstimateData] = useState([
    {
      name: "Lombard",mktrateestimate: 0.04
    },{
      name: "Other Secured",{
      name: "Unsecured",mktrateestimate: 0.04
    }
  ]);

  const preSetEstimateData = (value,itemId) => {

    const item = marketEstimateDataBCAssets[itemId];
    const newItem = {
      ...item,mktrateestimate: value,}

    setmarketEstimateData([
      ...marketEstimateDataBCAssets.slice(0,itemId),newItem,...marketEstimateDataBCAssets.slice(itemId)
    ]);
  };

  return (
    <div>
      {
        marketEstimateDataBCAssets.map((item,id) => {
          return (
            <Segment>
              <div> {item.name}</div>
              <div> {item.prevgroupinputrate}</div>
              <div> {item.currgroupinputrate}</div>
              <input
                value={item.mktratedelta}
                onChange={e => preSetEstimateData(e.target.value,id)}
              />
              <div> {item.mktrateestimate}</div>
            </Segment>
          )
        })
      }
    </div>
  )
}

export default Component;