实现 useStack 挂钩后出现错误。错误：（堆栈未定义）

Question

我有一个数组，它的值转换为按钮。单击每个按钮时，其值将写入 ul 列表中。当点击“Pop”时，最后一个值被删除。

预期输出：

我使用 useStack 钩子来实现它。但是运行后，输出是一个空白页，我在控制台收到这个错误：

Uncaught TypeError: stack is undefined

components.js：

import React from 'react';
import {useStack} from './hooks'

export function Demo() {
    return (
        <div className="demo">
        <StackDemo/>
        </div>
    );
}

const words = ['Apple', 'Banana', 'Cherry', 'Grape'];
function StackDemo() {
    const {stack, push, pop} = useStack();
    return (<div>
        {words.map((word, index) => <button key={index} onClick={() => push(word)}>{word}</button>)}
        <button onClick={pop}>» Pop</button>
        <ul>
            {stack.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
    </div>);
}

hooks.js：

import {useState} from 'react';

export function useStack() {
    const [array,setArray] = useState([]);

    const add = (value) => {
        return setArray(array.push(value));
    }
    const del = () => {
        return setArray(array.pop());
    }

    return {array, add, del};
}

当然，如果我编辑 components.js：

// const {stack, push, pop} = useStack(); to // 常量 [stack, push, pop] = useStack();

并编辑 hooks.js：

// return {array, add, del} to // return [array, add, del]

然后输出显示：

但是当我点击其中一个时，输出将变成空白页，并且我在控制台中收到此错误：

Uncaught TypeError: stack.map is not a function

有什么问题？我应该如何将 useStack 输出 分配给 const {stack, push, pop} ？？

感谢您的帮助。

Answer 1

useStack 挂钩存在几个问题：

• 你的add函数：

const add = (value) => {
    return setArray(array.push(value));
}

array.push returns a number（新数组的长度），不是添加新元素后的数组。这会导致白页（由 JavaScript TypeError 引起，因为现在 stack 不再是数组）。

要解决这个问题，我建议：

const add = (value) => {
    return setArray(array.concat(value));
}

• 你的del函数：

const del = () => {
    return setArray(array.pop());
}

在这种情况下，array.pop returns the value 刚刚被弹出，所以现在堆栈是一个字符串而不是一个数组。

要解决这个问题，我建议：

const del = () => {
    return setArray(array.slice(1));
}

这是一个工作示例：https://codesandbox.io/s/brave-neumann-41ltx?file=/src/App.js。