react入门知识点

react修改数组（响应式数据）

import { useState } from 'react'
function Example() {
    const [items, setItems] = useState([
        { id: 1, value: 'apple' },
        { id: 2, value: 'banana' },
        { id: 3, value: 'cherry' }
    ])

    // 假设我们需要更新 id 为 2 的对象
    const updateItemById = (id, newValue) => {
        setItems(items.map((item) => (item.id === id ? { ...item, value: newValue } : item)))
    }

    // 调用函数更新 id 为 2 的对象
    updateItemById(2, 'berry')

    return null
}
// 使用示例
// <Example />;

修改对象

function Example() {
    const [state, setState] = useState({ count: 0, name: 'John' })

    // 修改响应式对象
    setState((prevState) => ({
        ...prevState,
        count: prevState.count + 1,
        name: 'Doe'
    }))

    console.log(state.count) // 输出 1
    console.log(state.name) // 输出 Doe

    return null
}