質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

[React]renderが反映されない

aiai8976
aiai8976

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0回答

0評価

0クリップ

5閲覧

投稿2019/12/29 01:32

編集2022/01/12 10:55

前提・実現したいこと

https://fullcalendar.io/docs/react
このサイトのライブラリを使用して、googleカレンダーと連携したカレンダーを作っています。
開発途中で、reader()が全く効かなくなりました。
render()内にdiv要素を盛り込んでみても、カレンダーコンポーネントを消してみても全く反映されません。
操作しているディレクトリ位置、キャッシュ削除も試しましたが何も変わりませんでした。
ちなみにmainにdivを追加するときちんと反映されます。
何か解決策がある方がいましたらコメントお願いします。

該当のソースコード

import React from 'react' import FullCalendar from '@fullcalendar/react' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick import './main.scss' export default class DemoApp extends React.Component { calendarComponentRef = React.createRef() state = { calendarWeekends: true, calendarEvents: [ // initial event data { title: 'Event Now', start: new Date() } ], isSignedIn: null } componentDidMount() { window.gapi.load('client:auth2', () => { window.gapi.client.init({ clientId: "hogehoge", scope: "hogehoge" }).then(() => { const auth = window.gapi.auth2.getAuthInstance(); this.setState({ isSignedIn: auth.isSignedIn.get() }); }); }); } renderAuth() { if (this.state.isSignedIn === null) { return <div>i dont know your google account</div> } else if (this.state.isSignedIn) { return <div>login with google!!</div> } else { return <div>I can not see your google account!!</div> } } loginWithGoogle = () => { window.gapi.auth2.getAuthInstance().signIn(); } logoutFromGoogle = () => { window.gapi.auth2.getAuthInstance().signOut(); } render() { return ( <div className='demo-app'> <div className='demo-app-top'> {this.renderAuth()} <button onClick={this.loginWithGoogle}> login with google </button> <button onClick={this.logoutFromGoogle}> logout from google </button> </div> <div className='demo-app-calendar'> <FullCalendar defaultView="dayGridMonth" header={{ left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} ref={this.calendarComponentRef} weekends={this.state.calendarWeekends} events={this.state.calendarEvents} dateClick={this.handleDateClick} /> </div> </div> ) } toggleWeekends = () => { this.setState({ // update a property calendarWeekends: !this.state.calendarWeekends }) } gotoPast = () => { let calendarApi = this.calendarComponentRef.current.getApi() calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object } handleDateClick = (arg) => { if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) { this.setState({ // add new event data calendarEvents: this.state.calendarEvents.concat({ // creates a new array title: 'New Event', start: arg.date, allDay: arg.allDay }) }) } } }

試したこと

  • デベロッパーツールを用いたキャッシュの削除
  • ディレクトリ位置の確認

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

maisumakun
maisumakun

2019/12/29 01:44

コンソールに何かエラーが出ていたりはしませんか?
aiai8976
aiai8976

2019/12/29 01:48

エラーはありません。 しかし、警告はあったので追加しました。 確認お願い致します。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。