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

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

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

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

Q&A

0回答

430閲覧

[React]renderが反映されない

aiai8976

総合スコア112

React.js

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

0グッド

0クリップ

投稿2019/12/29 01:32

編集2022/01/12 10:55

前提・実現したいこと

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

###エラー
コンソールには以下の警告が出ています。

A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a resource at http://google.com/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.

該当のソースコード

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 }) }) } } }

試したこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/12/29 01:44

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

2019/12/29 01:48

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問