Reactjs 如果useState的值是一个对象而不是一个数组，为什么reverse（）可以工作？

我试图在我的项目中使用react钩子，但当我使用数组作为值时，useState有一个问题

const List = () => {
    const [list, setList] = useState({ name: ["Bob", "Alice", "Dora"] })
    const reverseList = () => {
        setList({ name: list.name.reverse() })
    }
    return (
        <div>
            <button onClick={reverseList}>Reverse</button>
            {list.name.map(name => name)}
        </div>
    )
}

const List=（）=>{
const[list，setList]=useState（{name:[“Bob”，“Alice”，“Dora”]}）
常量反向列表=（）=>{
setList（{name:list.name.reverse（）}）
}
返回(
逆转
{list.name.map（name=>name）}
)
}

以上代码工作正常。但是

const List = () => {
    const [list, setList] = useState(["Bob", "Alice", "Dora"])
    const reverseList = () => {
        setList(list.name.reverse())
    }
    return (
        <div>
            <button onClick={reverseList}>Reverse</button>
            {list.map(name => name)}
        </div>
    )
}

const List=（）=>{
const[list，setList]=useState（[“Bob”、“Alice”、“Dora”]）
常量反向列表=（）=>{
setList（list.name.reverse（））
}
返回(
逆转
{list.map（name=>name）}
)
}

---

它不起作用！！你能告诉我为什么React是这样工作的吗？上面的代码有什么区别吗？

首先，你要将状态设置为一个新的对象引用。在第二种情况下，您没有设置新的对象引用，而是在数组上调用

reverse

，这会使它发生变异

在这两种情况下，我建议创建数组的浅层副本并调用

reverse

，以便React知道它正在处理新状态，因此知道重新渲染

const List=（）=>{
const[list，setList]=useState（{name:[“Bob”，“Alice”，“Dora”]}）
常量反向列表=（）=>{
//浅拷贝
集合列表（{name:[…list.name].reverse（）}）
}
返回(
逆转
{list.name.map（name=>name）}
)
}

const List=（）=>{
const[list，setList]=useState（[“Bob”、“Alice”、“Dora”]）
常量反向列表=（）=>{
//浅拷贝
setList（[…list.name].reverse（））
}
返回(
逆转
{list.map（name=>name）}
)
}