Javascript 为什么以下功能部件不能正常工作？

这是非常直接的，当你按“添加”时，它应该添加（并添加），当你按“删除”时，它应该弹出最后一个元素并重新呈现列表，但它没有。我在什么地方出错了

import React, { useState, useEffect } from 'react';


const Test = () => {
    const [list, setList] = useState([]);
    const add = () => {
        setList([list.length, ...list]);
    }

    const remove = () => {
        list.pop();
        setList(list);
    }

    useEffect(() => {
        console.log(list)
    }, [list])

    return (<ul>
        <button onClick={add}>add</button>
        <button onClick={remove}>remove</button>
        {list.map(el => <li>{el}</li>)}
    </ul>)
}

export default Test;

import React，{useState，useffect}来自“React”；
常数测试=（）=>{
const[list，setList]=useState（[]）；
常量添加=（）=>{
setList（[list.length，…list]）；
}
常量删除=（）=>{
list.pop（）；
设置列表（列表）；
}
useffect（（）=>{
console.log（列表）
}，[列表]）
返回（

添加
去除
{list.map（el=>
{el}
）}
）
}
导出默认测试；

更新：

---

实际上，它通过删除最后一个元素来更新状态，但只有在按下“添加”按钮时才会重新渲染。不建议修改状态本身，因为它是不可变的

因此，我建议先克隆该数组并从中删除所需的元素，然后将结果传递给

setList（）

函数，而不是使用数组的原始状态

请尝试以下操作：

const remove = () => {
    const copy = [...list];
    copy.pop();
    setList(copy);
}

考虑以下几点：

const list=[1,3,5,6,7]；
常量副本=[…列表]；
copy.pop（）；
控制台日志（列表）；
控制台日志（副本）

您需要设置一个新数组在这种情况下，

setList（list）

不会导致React重新渲染，因为它仍然是您正在使用的同一数组

在

remove

函数中尝试

setList（[…list]）

还有一种替代

pop

，它不会改变原始变量：

const remove=（）=>{
常量[已删除，…新列表]=列表
集合列表（新列表）
}

您的add函数似乎有误，您正在按列表的长度，然后将整个列表添加到列表中。不要改变您所在状态的内容，使用例如

list.slice（0，-1）

获取除最后一个值以外的所有值的数组。@Amardepsaini这是因为我想用最新的元素在前面构建列表：初始列表为[]（len=0），当按下“添加”按钮时，列表被设置为“[0，…[]=[0]（len=1）`然后在第二次添加时，单击列表变成

[1，…[0]=[1，0]（len 2）

，依此类推。@HristoTodorov，添加函数最糟糕的部分是你没有在其中做任何事情，您没有向其中添加任何新列表，因此它将不起作用。@HristoTodorov关于您的删除函数，它将不起作用，因为您必须先修改状态，然后执行操作，然后再将其设置为有效。谢谢您，它起作用了。因此，当容器发生更改时，react会更改状态，而不仅仅是它包含的值？@HristoTodorov一旦您调用了

setState

函数（在您的情况下是

setList

），它会更改状态。直接修改状态不是一个好的做法。谢谢你！我得到了它！谢谢，这很有效。因此，react在容器更改时更改状态，而不仅仅是更改其包含的值？请参见react文档：本质上，当您执行

setList（list）

时，您告诉react将状态更新为未更改的

列表

引用。通过克隆

列表

，将创建一个新的引用，只有这样React才能判断它是不同的状态。