使用钩子更改状态返回无法读取未定义的属性“过滤器”

Question

由于一些奇怪的原因，当尝试使用 setState (hooks) 更改数组时，我收到以下错误：

无法读取未定义的属性“过滤器”。

尝试控制台记录阵列count，我正在取回所有列出的项目。

单击该handleDelete事件会给我那个错误。

我是否以错误的方式使用 React Hooks？

import React, { useState } from 'react';

// Components

import NavBar from './components/navbar';

import Counters from './components/counters';

import './App.css';

const App = () => {

    const [count, setCounters] = useState({

        data: [

            {

                id: 1,

                value: 4,

            },

            {

                id: 2,

                value: 0,

            },

            {

                id: 3,

                value: 0,

            },

            {

                id: 4,

                value: 0,

            },

        ],

    });

    const handleIncrement = counter => {

        const counters = [...count.data];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value++;

        setCounters(counters);

    };

    const handleDecrement = counter => {

        const counters = [...count.data];

        const index = counters.indexOf(counter);

        counters[index] = { ...counter };

        counters[index].value--;

        setCounters(counters);

    };

    const handleReset = () => {

        const counters = count.data.map(c => {

            c.value = 0;

            return c;

        });

        setCounters(counters);

    };

    const handleDelete = counterId => {

        const counters = count.data.filter(c => c.id !== counterId);

        setCounters(counters);

    };

    return (

        <React.Fragment>

            <NavBar

                totalCounters={count.data.filter(c => c.value > 0).length}

            />

            <main className="container">

                <Counters

                    onReset={handleReset}

                    onDelete={handleDelete}

                    onIncrement={handleIncrement}

                    onDecrement={handleDecrement}

                    counters={count.data}

                />

            </main>

        </React.Fragment>

    );

};

export default App;

Answer 1

错误在handleDecrement和handleIncrementconst counters = [...count.data];...setCounters(counters);在你的初始状态，count是一个有data属性的对象。当你setCounters(counters)，你设置count为一个数组，然后，你尝试.data从count渲染方法中访问，但那undefined会导致错误。你需要改变setCounters(counters); // set count as an array至setCounters({data: counters}); // set count as an object with property 'data' as an array

Answer 2

问题是您错误地设置了计数数据。而是执行以下操作。setCounters({&nbsp;data:&nbsp;counters&nbsp;});

Answer 3

在您的某些方法中，您将counters状态设置为数组。但是在初始化中，您存储的counters是一个具有数据属性的对象（这是一个数组）。当您调用handleDelete存储在counters数组中的方法时。因此，当组件重新渲染时，它会尝试调用该filter方法，counters.data但counter.data当时并不存在。为了解决这个问题，你可以初始化counters状态，使其成为一个数组：const [count, setCounters] = useState([&nbsp; &nbsp; { id: 1, value: 4, },&nbsp; &nbsp; { id: 2, value: 0, },&nbsp; &nbsp; { id: 3,value: 0, },&nbsp; &nbsp; { id: 4, value: 0, },]);并考虑到您的代码的其余部分count不再具有data属性。另一种解决方案是更新count保持原始结构的状态。该handleDelete方法如下所示：const handleDelete = counterId => {&nbsp; &nbsp; const counters = count.data.filter(c => c.id !== counterId);&nbsp; &nbsp; setCounters({ data: counters });};