TypeError: Cannot read property 'map' of undefined in react with UseState

TypeError: Cannot read property 'map' of undefined in react with UseState

所以我正在用 react 编写这个应用程序,它允许您向图像添加滤镜,我收到错误“TypeError:无法读取未定义的 属性 'map'”我正在使用具有 UseState 的功能组件。默认选项是过滤器。这是App.js

import React, { useState } from 'react'
import './App.css';
import Slider from './Slider'
import SidebarItem from './SidebarItem'

const DEFAULT_OPTIONS = [
  {
    name: 'Brightness',
    property: 'brightness',
    value: 100,
    range: {
      min: 0,
      max: 200
    },
    unit: '%'
  },
  {
    name: 'Contrast',
    property: 'contrast',
    value: 100,
    range: {
      min: 0,
      max: 200
    },
    unit: '%'
  },
  //...
]

function App() {
  const { options, setOptions } = useState(DEFAULT_OPTIONS)
  
  return (
    <div className="container">
      <div className="main-image" />
      <div className="sidebar">
        {options.map((option, index) => {
          return (
          <SidebarItem
            key={index}
            name={option.name}
          />
          )
        })}
      </div>
      <Slider />
    </div>
  )
}

export default App;

使用useState时不是花括号。这是一个数组

const [ options, setOptions ] = useState(DEFAULT_OPTIONS)