實現 useStack 掛鈎后出現錯誤。 錯誤：（堆棧未定義）

Question

我有一個數組，它的值轉換為按鈕。 單擊每個按鈕時，其值將寫入 ul 列表中。 當點擊“Pop”時，最后一個值被刪除。

預期 output：

我使用 from useStack鈎子來實現它。 但是運行后，output 是一個空白頁，我在控制台中收到此錯誤：

Uncaught TypeError: stack is undefined

組件.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>);
}

鈎子.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：

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

並編輯 hooks.js：

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

然后 output 顯示：

但是當我點擊其中一個時，output 將變為空白頁，並且我在控制台中收到此錯誤：

Uncaught TypeError: stack.map is not a function

問題是什么？ 我應該如何將useStack output分配給const {stack, push, pop} ？

謝謝你的幫助。

Answer 1

useStack鈎子有幾個問題：

• 您add function：

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

array.push返回一個數字（新數組的長度），而不是添加新元素后的數組。 這會導致白頁（由 JavaScript TypeError引起，因為現在stack不再是數組）。

為了解決這個問題，我建議：

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

• 您的del function：

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

在這種情況下， array.pop返回剛剛彈出的值，所以現在 stack 是一個字符串而不是一個數組。

為了解決這個問題，我建議：

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

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