Frage zu REACT

[heinetz]

Allright!

Folgend meine Komponente:

1. /* eslint-disable jsx-a11y/media-has-caption */
2. import React, { Component } from 'react';
3. import PropTypes from 'prop-types';
4. import classNames from 'classnames';
5. import MwocAppContext from './MwocAppContext.jsx';
6. import Overlay from './Overlay/index.jsx';
7. import ControlPanel from './ControlPanel/index.jsx';
8. import DragDrop from './DragDrop/index.jsx';
9. import Hotspots from './Hotspots/index.jsx';
10. import VideoMI24Source from '../VideoMI24Source';
11. 
12. const DEFAULT_STATE = {
13.   chapter: 0,
14.   level: 0,
15.   data: {
16.     level: {},
17.     chapter: {}
18.   },
19.   dataLoaded: false,
20.   introStarted: false,
21.   introEnded: false,
22.   loopStarted: false,
23.   aspecRatio: 0
24. };
25. 
26. export default class MwocApp extends Component {
27.   constructor(props) {
28.     super(props);
29.     this.dragdrop = React.createRef();
30.     this.intro = React.createRef();
31.     this.loop = React.createRef();
32. 
33.     this.state = DEFAULT_STATE;
34.   }
35. 
36.   componentDidMount() {
37.     // console.log('componentDidMount()');
38.     this.loadData();
39.   }
40. 
41.   loadData = (settings = { chapter: 0, level: 0 }) => {
42.     this.setState(
43.       {
44.         ...{
45.           introEnded: false,
46.           loopStarted: false
47.         },
48.         ...settings
49.       },
50.       async () => {
51.         const { data } = this.props;
52.         const { chapter, level, introStarted } = this.state;
53.         const { video } = data.chapters[chapter].levels[level];
54. 
55.         this.setState({
56.           dataLoaded: false
57.         });
58. 
59.         switch (video.type) {
60.           case 'mi24':
61.             await Promise.all([
62.               VideoMI24Source(this.intro.current, video.intro),
63.               VideoMI24Source(this.loop.current, video.loop)
64.             ]);
65.             break;
66.           default:
67.             this.intro.current.src = video.intro;
68.             this.loop.current.src = video.loop;
69.             break;
70.         }
71.         this.setState({
72.           dataLoaded: true,
73.           data: {
74.             chapter: {
75.               ...data.chapters[chapter],
76.               next: data.chapters[chapter + 1]
77.             },
78.             level: {
79.               ...data.chapters[chapter].levels[level],
80.               next: data.chapters[chapter].levels[level + 1]
81.             }
82.           }
83.         });
84.         this.loop.current.addEventListener('canplay', this.dataLoaded, false);
85. 
86.         if (introStarted) {
87.           this.intro.current.play();
88.         }
89.       }
90.     );
91.   };
92. 
93.   startLoop = () => {
94.     // console.log('startLoop()');
95.     this.setState({
96.       loopStarted: true
97.     });
98.     this.loop.current.play();
99.   };
100. 
101.   dataLoaded = e => {
102.     const { loop } = this;
103. 
104.     this.setState({
105.       aspecRatio: loop.current.offsetHeight / loop.current.offsetWidth
106.     });
107.     this.dragdrop.current.init();
108.     this.loop.current.removeEventListener('canplay', this.dataLoaded, false);
109.   };
110. 
111.   startIntro = () => {
112.     // console.log('startIntro()');
113.     this.setState({
114.       introStarted: true
115.     });
116.     this.intro.current.play();
117.   };
118. 
119.   introEnded = () => {
120.     // console.log('introEnded()');
121.     this.setState({
122.       introEnded: true
123.     });
124.   };
125. 
126.   test = () =>
127.     // console.log('MwocApp: test()');
128.     true;
129. 
130.   render() {
131.     const { introEnded, dataLoaded, loopStarted } = this.state;
132. 
133.     return (
134.       <MwocAppContext.Provider value={this}>
135.         <DragDrop ref={this.dragdrop}>
136.           <video
137.             className={classNames('o-mwoc-app__video', 'o-mwoc-app__video--loop')}
138.             ref={this.loop}
139.             playsInline
140.             loop
141.           />
142.           <video
143.             className={classNames('o-mwoc-app__video', 'o-mwoc-app__video--intro')}
144.             hidden={introEnded !== false || dataLoaded !== true}
145.             ref={this.intro}
146.             playsInline
147.             onEnded={this.introEnded}
148.           />
149.           <Hotspots />
150.         </DragDrop>
151.         <ControlPanel hidden={!loopStarted} />
152.         <Overlay template="startIntro" />
153.         <Overlay template="startLoop" />
154.       </MwocAppContext.Provider>
155.     );
156.   }
157. }
158. 
159. MwocApp.propTypes = {
160.   data: PropTypes.shape({
161.     chapters: PropTypes.arrayOf(
162.       PropTypes.shape({
163.         levels: PropTypes.arrayOf(
164.           PropTypes.shape({
165.             video: PropTypes.PropTypes.shape({
166.               type: PropTypes.string.isRequired,
167.               intro: PropTypes.string,
168.               loop: PropTypes.string
169.             }).isRequired,
170.             hotspots: PropTypes.arrayOf(
171.               PropTypes.shape({
172.                 position: PropTypes.shape({
173.                   left: PropTypes.string,
174.                   right: PropTypes.string
175.                 })
176.               })
177.             )
178.           })
179.         ).isRequired
180.       })
181.     ).isRequired
182.   }).isRequired
183. };
184. 
185. MwocApp.defaultProps = {};
186. 

Es-lint stört sich an den Zeilen 73-84 (react/no-unused-state). Die Regel habe ich grundsätzlich verstanden. Hier wird der state gesetzt, der in der Komponente garnicht benutzt wird. Allerdings verwende ich hier die Context-Api um in den Child-Komponenten auf den State zugreifen zu können.

Was mache ich falsch?

gruss, heinetz