Reactjs 如何重构React代码以减少“this.state”

我在React项目中有一个类，它有两个保存状态：

import SoundData from './sounds.json';    
class SoundReading extends React.Component {
    state = { 
        data: SoundData.sounds,
        index: 0
    }...
 }

在我剩下的代码中，我不断地调用'this.state.data…'和'this.state.index'

我知道我们可以删除常量中的'this.state'，方法是将道具名称作为参数包含在花括号中

const SongDetail = ({ song }) => {...}

但在目前的情况下，我将直接从JSON中提取这些数据到我正在使用的组件中

如何重构代码，使我不必不断地编写和阅读“this.state”？

解构

const { data, index } = this.state;

解构

const { data, index } = this.state;

---

我尝试了这个，但它给了我一个“意外的令牌错误，并指向{after const.我尝试了这个，但它给了我一个”意外的令牌错误，并指向{after const.的开口。