更新數組中對象的值

Question

如何使用掛鈎狀態設置來更新特定ID的標題。 這里：

const NotesContainer = ({

}) => {
  const [notesDummyData, setNotesDummyData] = useState([
    {
      id: '5',
      title: 'Sauna',
    },
    {
      id: '7',
      title: 'Finland',
    },
  ]);

  const onChangeItemName = (newTitle, oldTitle, itemId) => {

    //Update a new title here for id 7

  };

找不到setState掛鈎的任何示例。

Answer 1

您可以使用Array.map() 。 對於每個項目，檢查id是否等於itemId 。 如果是這樣，請展開該項目，然后替換title 。 如果不是，請返回原始項目：

const onChangeItemName = (title, itemId) => {
  setNotesDummyData(notesDummyData.map(o => o.id === itemId ? ({
    ...o,
    title
  }) : o));
};

Answer 2

只需映射各個項目，如果id等於所選的id，則只需修改值：

 const onChangeItemName = (newTitle, oldTitle, itemId) => {
      setNotesDummyData(notesDummyData.map(x => {
           if(x.id !== itemId) return x
           return {...x, title: newTitle}
      }))
 }

Answer 3

使用React Hook更新數據很容易，但是沒有可用的setState() ，因此可以使用[notThis, thisOne(setNotesDummyDate)]來更新數據。

const [notesDummyData, setNotesDummyData] = useState([
    {
      id: '5',
      title: 'Sauna',
    },
    {
      id: '7',
      title: 'Finland',
    },
  ]);

使用React Hook方法更新數據：

const onChangeItemName = (newTitle, oldTitle, itemId) => {
       setNotesDummyDate = useState([
    {
      id: itemId, // Update
      title: newTitle,
    },
    {
      id: itemId, // Update
      title: newTitle,
    },
  ]);
 }

仍然很好奇， 在這里學習useState（）

加油！