时间戳

首页 > 解决方案 > 为什么下面的 react 功能组件不能正常工作？

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

问题描述

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

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;

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

标签： javascriptreactjsreact-hooks

解决方案

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

因此，而不是使用.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);

我希望这有帮助！

推荐阅读