时间戳

首页 > 解决方案 > 如何使用 React Hooks 更改某个对象中的某个属性？

reactjs - 如何使用 React Hooks 更改某个对象中的某个属性？

问题描述

我尝试将对象更新为某个属性，但在新渲染之后，我总是收到usePl不是地图函数的错误消息。例如，我想更改对象 2 中的图像属性。

const pl = [
  {
    id: 1,
    bezeichnung: 'fit4Assembly Woche 1 -3',
    erstellungsDatum: '28.07.2020',
    ersteller: 'Max Maier',
    aufgaben: ['Aufgabe 1', 'Aufgabe 2', 'Aufgabe 3'],
    gruppe: 'Gruppe 1',
    bild: ''
  },
  {
    id: 2,
    bezeichnung: 'fit4Assembly Woche 1 -3',
    erstellungsDatum: '28.07.2020',
    ersteller: 'Max Maier',
    aufgaben: ['Aufgabe 1', 'Aufgabe 2', 'Aufgabe 3'],
    gruppe: 'Gruppe 2',
    bild: ''
  }
];

const [usePl, setUl] = React.useState(pl);

async function handleInputChangeBild(event, id) {
  [...]
  let reader = new FileReader();
  reader.onload = (e) => {
    setUl((prevState) => ({
      ...prevState,
      [id]: e.target.result //For examble the ID is 2
    }));
  };
  [...]
}

标签： reactjs

解决方案

您可以映射先前的状态数组（在您的示例中），并使用预期的 ID 更新元素的属性，仅通过在每次迭代中返回自身来保持其他元素不变

async function handleInputChangeBild(event, id) {
  [...]
  let reader = new FileReader();
  reader.onload = (e) => {
    setUl((prevState) => prevState.map(el => {
      if (el.id === id) {
        return {
          ...el,
          'your-expected-attribute': e.target.result 
        }
      } else {
        return el
      }
    }));
  };
  [...]
}

推荐阅读