Hallo Ingrid,
Ohne den Code deiner anderen Komponenten zu kennen würde ich vermuten, dass du besser fährst, wenn du nur die Dinge aus deinem State weiter reichst, die du in den Kind-Komponenten auch benötigst. Oder wenn, wenn du wirklich den ganzen State benötigst, dass du auch nur den State weiter reichst (
<FooContexit.provider value={this.state} />
).
Ich denke, ich würde auch dann soweit gehen und den State explizit auseinander nehmen und ein neues Objekt bauen:
const { chapter, level, data, dataLoaded, introStarted, introEnded, loopStarted, aspectRatio } = this.state;
return (
<FooContext.provider value={{chapter, level, data, dataLoaded, introStarted, introEnded, loopStarted, aspectRatio}}>
...
</FooContext.provider>
);
So ist offensichtlich, was du übergibst und der Code bleibt insgesamt lesbarer. Außerdem schleicht sich nicht so schnell ein, dass du nach und nach immer mehr neue Felder hinzufügst, weil du jedesmal daran denken musst, dass du den Provider anpassen musst.
Das alles natürlich nur, wenn ich beim aktuellen Konzept bleiben würde. Tatsächlich würde ich allerdings zunächst das Konzept noch einmal überdenken wollen…
LG,
CK