Как отобразить карту с помощью useState React - PullRequest
Новая
       1

Как отобразить карту с помощью useState React

1 голос
/ 05 ноября 2019

У меня есть поле ввода, в которое я хотел бы ввести число;этот номер затем должен храниться в указанном ключе "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
    }
  ]);

{Object.keys(marketEstimateDataBCAssets).map(function(key) {
        return (
          <Segment>
            <div> {marketEstimateDataBCAssets[key].name}</div>
            <div> {marketEstimateDataBCAssets[key].prevgroupinputrate}</div>
            <div> {marketEstimateDataBCAssets[key].currgroupinputrate}</div>
            <input
              value={marketEstimateDataBCAssets[key].mktratedelta}
              onChange={e =>
                (marketEstimateDataBCAssets[key].mktratedelta = e.target.value)
              }
            />
            <div> {marketEstimateDataBCAssets[key].mktrateestimate}</div>
          </Segment>
        );

Ответы [ 4 ]

1 голос
/ 05 ноября 2019

Вот пример того, как разделить логику на два компонента и вывести список активов 

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',
      prevgroupinputrate: 0.01,
      currgroupinputrate: 0.02,
      mktratedelta: 0.033,
      mktrateestimate: 0.04,
    },
    {
      id: 2,
      name: 'Unsecured',
      prevgroupinputrate: 0.01,
      currgroupinputrate: 0.02,
      mktratedelta: 0.0333,
      mktrateestimate: 0.04,
    },
  ]);

  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,
  name: 'Lombard',
  prevgroupinputrate: 0.01,
  currgroupinputrate: 0.02,
  mktratedelta: 0.03,
  mktrateestimate: 0.04,
}

становится 

{
  id: 0,
  name: 'Lombard',
  prevGroupInputrate: 0.01,
  currGroupInputrate: 0.02,
  mktRateDelta: 0.03,
  mktRateEstimate: 0.04,
}
0 голосов
/ 05 ноября 2019

Как то так. 


import React from 'react';

const Component = () => {

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

  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;
0 голосов
/ 05 ноября 2019

Есть несколько проблем с кодом. 1. вы не можете сделать Object.keys для массивов (marketEstimateDataBCAssets - это массив в вашем коде);

Вы не можете напрямую присваивать значения объекту состояния.

Вы можете решить первую проблему, просто удалив Object.keys;

, для второй проблемы просто создайте функцию, передающую значение ключа массива вместе со входным значением. В функции создайте массив и обновите значение индексированного объекта, а затем просто передайте данные нового массива в setmarketEstimateData

, чтобы код был: 

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

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>
  );
}
0 голосов
/ 05 ноября 2019

Вы напрямую меняете 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>
      ))}
    </>

        );

вот быстрое демо . спасибо @Titus за указание на проблему.

...