常連

自己紹介

コメントの削除ボタンを押すと
NoMethodError in BookCommentsController#destroy　undefined method `destroy' for nil:NilClassエラーが出てきます。
値が渡されてないエラーなのは理解したのですが、指定しているつもりでどこがおかしいかご教授くださいm(__)m

```routes
resources :users, only: [:show, :index, :create, :update, :edit]
  resources :books, only: [:edit, :create, :update, :index, :show, :destroy] do
	  resource :favorites, only: [:create, :destroy]
	  resources :book_comments, only: [:create, :destroy]
 end

end
```

```viwe
  <% @book_show.book_comments.each do |book_comment| %>
				    <li class="comment">
				      <div class="comment-body bb">
				        <div class="comment-avatar">
				          <div class="avatar">
				            <%= attachment_image_tag @user_show, :profile_image, format: 'jpeg', size: '50x50', fallback: "no_image.jpg" %>
				        </div>
				        <div class="comment-text">
				          <div class="comment-author clearfix">
				            <a href="#" class="link-author"><%= book_comment.user.name %></a>
				            <span class="comment-meta">
				              <span class="comment-date"><%= book_comment.created_at.strftime('%Y/%m/%d') %></span>
				            </span>
				          </div>
				          <div class="comment-entry"><%= book_comment.comment %></div>
				        </div>
				        <% if book_comment.user == current_user %>
				        <div>
				        	<%= link_to "delete", book_book_comment_path(book_comment.book, book_comment), method: :delete, class: "btn btn-danger pull-rigth" %>
				        </div>
				        <% end %>
				      </div>
				    </li>
				  <% end %>
```

```controller
def create
  	book = Book.find(params[:book_id])
  	comment = current_user.book_comments.new(book_comment_params)
  	comment.book_id = book.id
  	comment.save
  	redirect_to book_path(book)
  end

  def destroy
    BookComment.find_by(id: params[:id], book_id: params[:book_id]).destroy
    redirect_to book_book_path(params[:book_id])
    end
```

rails コメントを削除できない。NoMethodError in BookCommentsController#destroy

react-hook-formを使ったForm内で入力した値を使って
getValueした値をもとに条件付きrenderを実行するコードを作成中ですが
掲題のような記述ができずに苦戦しています。
目的は、配列でIDのような数値が振られていて
その数値ごとに条件チェックを行うようにすることです。
XXXの部分が変数になった場合に
`values.hensu` などとしても、ただの文字列になってしまいます・・・。
(hensu にセットされる文字列を直接記載して values.XXX とすると、値は正確に取れている状態です）

お分かりになる方がいらっしゃいましたら、ご教授お願いしますｍ

- Sample1
```
import React, {useState} from 'react';
import { useForm } from "react-hook-form";
import { Grid } from '@material-ui/core';
import './address.css';
import Phone from './Phone';

function Address() {
  const {register, handleSubmit, getValues} = useForm();
  const [addresses, setAddresses] = useState(["address0"]);
  const [isPhone, setIsPhone] = useState([false])

  function addAddress() {
    const newAddresses = [...addresses];
    console.log("before", newAddresses, addresses, `address.${addresses.length}`);
    newAddresses.push(`address.${addresses.length}`);
    setAddresses(newAddresses);
    console.log(newAddresses, addresses, `address.${addresses.length}`);
  };

  function removeAddress(index) {
    if (addresses.length > 1) {
      const newAddresses = [...addresses];
      console.log("target", index);
      newAddresses.splice(index, 1);
      for (var i = index; i < newAddresses.length; i++) {
        newAddresses[i] = `address.${i}`;
      }
      setAddresses(newAddresses);
      console.log(newAddresses, addresses, `address.${addresses.length}`);
    }
  }

  function setPhone(index) {
    const newPhone = [...isPhone];
    newPhone[index] = true;
    setIsPhone(newPhone);
  }

  return (
    <form onSubmit={handleSubmit()}>

      <h3>Address</h3>
      <button type="button" onClick={addAddress}>
        Add Address
      </button>
      {addresses.map((address, index) => {
        return (
          <div key={address}>
            <fieldset className="fieldset" name={address}>
              <Grid container>
                <Grid item xs={4}>
                  Address
                </Grid>
                <Grid item>
                  <input
                    type="text"
                    name={address}
                    size="40"
                    ref={register}
                  />
                </Grid>
              </Grid>

              <Grid container>
                <Grid item xs={4}>
                  Phone1 (Home)
                </Grid>
                <Grid item xs={4}>
                  <input
                    type="checkbox"
                    name={`${address}_phone1`}
                    ref={register}
                  />
                </Grid>
              </Grid>

              <Grid container>
                <Grid item xs={4}>
                  Phone2 (Mobile)
                </Grid>
                <Grid item xs={4}>
                  <input
                    type="checkbox"
                    name={`${address}_phone2`}
                    ref={register}
                  />
                </Grid>
              </Grid>

              <button onClick={() => setPhone(index)}>add Phone Info</button>
              {isPhone[index] &&
                <Phone register={register} values={getValues} address={`address${index}`} />
              }

            </fieldset>
            <button type="button" onClick={() => removeAddress(index)}>
              -
            </button>
          </div>
        )
      })}
    </form>
  )
}

export default Address;
```


- Sample2
```
import React from 'react';
import "./input.css";
import { Grid } from '@material-ui/core';

const Phone = ({ register, watch, values, address }) => {
  const address_phone1 = `values.${address}_phone1`;
  const address_phone2 = `values.${address}_phone2`;
  console.log("phone1:", address, "value1: ", address_phone1, "value2: ", address_phone2);

  return (
    <div>
      <fieldset>
        <h3>Phone Info {address}</h3>

        {address_phone1 &&
          <Grid container>
            <Grid item xs={4}>
              Phone1
            </Grid>
            <Grid item>
              <input
                type="text"
                name={`${address}_phone1_number`}
                size="15"
                defaultValue="03-XXXX-XXXX"
                ref={register}
              />
            </Grid>
          </Grid>
        }

        {address_phone2 &&
          <Grid container>
            <Grid item xs={4}>
              Phone2
            </Grid>
            <Grid item>
              <input
                type="text"
                name={`${address}_phone2_number`}
                size="15"
                defaultValue="090-XXXX-XXXX"
                ref={register}
              />
            </Grid>
          </Grid>
        }


      </fieldset>
    </div>
  )
}

export default Phone;
```

react-hook-formで value.XXX の XXX を変数で表記したい

# 概要
Reactにて描画についてつまずいております。

# 該当コード
```
  return cognitoUser ? (<Redirecting />)
    : nextAuthState === '' ? <SignUp />
    : nextAuthState === 'ConfirmSignUp' ? <Verification />
    : <p>想定外</p>
```
処理内容、ログイン済みであれば、Redirectingを呼び
未登録の場合、SignUpを呼び
2段階認証のメールを確認時にはVerificationを呼ぶといった具合です、

# エラー

エラー本文
「Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.」
和訳
「マウントされていないコンポーネントで React の状態更新を実行できません。これはダメですが、アプリケーションのメモリリークを示しています。修正するには、useEffect クリーンアップ関数ですべてのサブスクリプションと非同期タスクをキャンセルしてください。」

# （追記)エラーが表示されるタイミング
```
 return cognitoUser ? (<Redirecting />)
    : nextAuthState === '' ? <SignUp />
    : nextAuthState === 'ConfirmSignUp' ? <Verification /> // ここがtrueになった時
    : <p>想定外</p>
```
エラーが表示されるタイミングとして<SignUp />から<Verification />へ描画が変わったタイミングでエラーが表示されます。


# 質問
useEffectを使用してコンポーネントを返すようにしてみましたが型エラーで上手く書けませんでした。
どのようにすれば良いかアドバイスお願い致します。

# 追記
SingUpコンポーネントは下記のようになっています。
```
  function SignUp(){
    const [email, setEmail] = React.useState<string>('')
    const [password, setPassword] = React.useState<string>('')
    const [family_name,setFamily_name] = React.useState<string>('')
    const [given_name, setGiven_name] = React.useState<string>('')
    const changedEmailHandler = (event:any) => setEmail(event.target.value)
    const changedPasswordHandler = (event:any) => setPassword(event.target.value)
    const changedFnameHandler = (event:any) => setFamily_name(event.target.value)
    const changedGnameHandler = (event:any) => setGiven_name(event.target.value)

    const signUp = () => {
      const attributeList = [
        new CognitoUserAttribute({
          Name:'email',
          Value: email
        }),
        new CognitoUserAttribute({
          Name:'family_name',
          Value: family_name
        }),
        new CognitoUserAttribute({
          Name: 'given_name',
          Value: given_name
        })
      ]
      userPool.signUp(email, password, attributeList, [], (err, result)=> {
        if(err) {
          console.log(err)
          return
        }
        setNextAuthState('ConfirmSignUp')
        setEmail('')
        setPassword('')
        setFamily_name('')
        setGiven_name('')
      })
    }
    return(
      <div className="SignUp">
      <h1 style={{ textAlign: 'left' }}>SignUp_hey</h1>
      <input type="text" placeholder="email" onChange={changedEmailHandler} />
      <input type="text" placeholder="password" onChange={changedPasswordHandler} />
      <input type="text" placeholder="性" onChange={changedFnameHandler} />
      <input type="text" placeholder="名" onChange={changedGnameHandler} />
      <button onClick={signUp}>SignUp</button>
    </div>
    )
  }
```

「マウントされていないコンポーネントで React の状態更新を実行できません。」というエラーについて

DMMCAMPかTECHCAMP、どちらのプログラミングスクールで学習を始めようか迷っています。
現在通われている方、または過去に通ったことがある方、下記について何卒ご教示いただけますでしょうか。

・両社就職先を大阪希望とした場合、東京就職と比較してどれぐらいの割合で実績があるのでしょうか。
・両者就職先にて、自社開発・受託開発・SESの割合はいかほどでしょうか。

よろしくお願いいたします。
(すみません、該当するタグが見つからなかったので、タグは適当です。)

プログラミングスクールについて

公式によれば、`componentWillUnmount()`メソッドは、DOMから削除されるときに呼び出されるものとされています。

ここでいう「DOMから削除される」という意味についての質問です。

下記コードのAppコンポーネントは60秒のタイマーを実行するものですが、`componentWillUnmount()`メソッド内の`clearInterval`関数は、具体的にはどういったタイミングで実行されているのでしょうか？

タイマー自体は見た目上削除されているわけではないので、「コンポーネントがDOMから削除される」ということの意味がよく分からない状態です。

初歩的な質問ですが、ご教授いただけると幸いです。

```tsx
import React, { Component } from 'react';
import { Button, Card, Icon, Statistic } from 'semantic-ui-react';

import './App.css';

const LIMIT = 60;

interface AppState {
  timeLeft: number;
}

class App extends Component<{}, AppState> {
  timerId?: NodeJS.Timer;

  constructor(props: {}) {
    super(props);
    this.state = { timeLeft: LIMIT };
  }

  reset = () => {
    this.setState({ timeLeft: LIMIT });
  };

  tick = () => {
    this.setState(prevState => ({ timeLeft: prevState.timeLeft - 1 }));
  };

  componentDidMount = () => {
    this.timerId = setInterval(this.tick, 1000);
  };

  componentDidUpdate = () => {
    const { timeLeft } = this.state;
    if (timeLeft === 0) {
      this.reset();
    }
  };

  componentWillUnmount = () => {
    clearInterval(this.timerId as NodeJS.Timer);
  };

  render() {
    const { timeLeft } = this.state;

    return (
      <div className="container">
        <header>
          <h1>タイマー</h1>
        </header>
        <Card>
          <Statistic className="number-board">
            <Statistic.Label>time</Statistic.Label>
            <Statistic.Value>{timeLeft}</Statistic.Value>
          </Statistic>
          <Card.Content>
            <Button color="red" fluid onClick={this.reset}>
              <Icon name="redo" />
              Reset
            </Button>
          </Card.Content>
        </Card>
      </div>
    );
  }
}

export default App;


```