为什么下面的 react 功能组件不能正常工作？答案

【问题标题】：Why the following react functional component does not work properly?为什么下面的 react 功能组件不能正常工作？
【发布时间】：2020-05-09 11:29:59
【问题描述】：

这很简单，当您按“添加”时，它应该添加（并且它添加），当您按“删除”时，它应该弹出最后一个元素并重新渲染列表，但事实并非如此。我在某个地方犯了错误？

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;

更新： 实际上它通过删除最后一个元素来更新状态，但只有在按下按钮“添加”时才会重新渲染

【问题讨论】：

您的添加功能似乎是错误的，您正在推送列表的长度，然后将整个列表添加到其中
不要改变你所在州的东西，使用例如list.slice(0, -1) 获取除最后一个值之外的所有值的数组。
@amardeepsaini 那是因为我想用前面的最新元素构建列表：最初列表是 [] (len = 0)，当按下添加时列表设置为` [0, . ..[]] = [0](len = 1)` 然后在第二次添加点击列表变为[1, ...[0]] = [1, 0](len 2) 等等。
@HristoTodorov，你的 add 函数最糟糕的部分是你没有在其中做任何事情，你没有向它添加任何新列表，所以它不会工作。
@HristoTodorov 关于你的删除功能它不会起作用，因为你必须先改变状态然后执行操作然后设置它例如

标签： javascript reactjs react-hooks

【解决方案1】：

不建议修改状态本身，因为它是不可变的。

因此，而不是在数组的原始状态上使用.pop()，首先我建议克隆那个并从那里删除所需的元素，然后将结果传递给setList() 函数。

请尝试以下操作：

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

想一想：

const list = [1,3,5,6,7];
const copy = [...list];
copy.pop();

console.log(list);
console.log(copy);

我希望这会有所帮助！

【讨论】：

谢谢它有效。那么当容器改变时，不仅改变它所包含的值，那么反应改变状态吗？
@HristoTodorov 一旦您调用 setState 函数（在您的情况下为 setList），它就会更改状态。直接修改状态不是一个好习惯。
谢谢！我明白了！

【解决方案2】：

在这种情况下，您需要设置一个新数组，setList(list) 不会导致 React 重新渲染，因为它仍然是您正在使用的同一个数组。

在您的 remove 函数中尝试 setList([...list])。

还有一个替代pop，并且不会改变原始变量：

  const remove = () => {
    const [removed, ...newList] = list
    setList(newList)
  }

【讨论】：

谢谢它有效。那么当容器改变时，不仅改变它所包含的值，那么反应改变状态吗？
从 React 文档中看到这个：reactjs.org/docs/… 本质上，当你在做 setList(list) 时，你是在告诉 react 将状态更新为未更改的 list 引用。通过克隆list，创建了一个新的引用，只有这样 React 才能知道它是一个不同的状态。