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

Question

由于一些奇怪的原因，当尝试使用 setState (hooks) 更改数组时，我收到以下错误：无法读取未定义的属性“过滤器”。尝试控制台记录阵列count，我正在取回所有列出的项目。单击该handleDelete事件会给我那个错误。我是否以错误的方式使用 React Hooks？import React, { useState } from 'react';// Componentsimport 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和handleIncrement

const 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({ data: counters });

Answer 3

在您的某些方法中，您将counters状态设置为数组。但是在初始化中，您存储的counters是一个具有数据属性的对象（这是一个数组）。

当您调用handleDelete存储在counters数组中的方法时。因此，当组件重新渲染时，它会尝试调用该filter方法，counters.data但counter.data当时并不存在。

为了解决这个问题，你可以初始化counters状态，使其成为一个数组：

const [count, setCounters] = useState([

    { id: 1, value: 4, },

    { id: 2, value: 0, },

    { id: 3,value: 0, },

    { id: 4, value: 0, },

]);

并考虑到您的代码的其余部分count不再具有data属性。

另一种解决方案是更新count保持原始结构的状态。该handleDelete方法如下所示：

const handleDelete = counterId => {

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

    setCounters({ data: counters });

};