常連

### 前提・実現したいこと

React+ReduxでSPAアプリケーションを開発中です。
ページのリロード（f5キー）時に状態が初期化されるのを防ぎたいのですが、中々いい案が思い浮かびません。
イメージ的にはリロードがされた時に発火するような処理を作りたいです。
どなたかご教授お願いいたします。

React+Reduxでリロード時も状態維持

```ターミナル
yarn run v1.16.0
error Couldn't find a package.json file in "/Users/○○○/○○○"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
先程まで何事もなく稼働していたのですが旧にサーバーが起動しなくなりました。
起動していたブランチに戻ってyarn startをするとサーバーは立ち上がりますが、新しく作ったブランチでサーバーが起動しないという状態です。
調べても原因がわからなかったので質問させて頂きました。
初心者で申し訳ありませんが、宜しくお願い致します。

error Couldn't find a package.json file inについて

#### 聞きたいこと
React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。
React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている（npmパッケージ等が古くなっている等）などがあり、どうにもわからない状態です。
そこで下記2点質問があります。
* 今回のエラーに対しての対処方法に関して
* React/Reduxのキャッチアップ方法はみなさんどうしているのか

をよければお聞きしたいです。
エラーに関しては下記にコードを載せます。もし情報が不足していましたら補足させていただきますので、よろしくお願いいたします。

#### コード
* Component
```JavaScript
import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
  BrowserRouter,
  Route,
  Switch,
  Link,
} from 'react-router-dom';

import { readLanguages, readRepositories } from '../actions';

class LanguagesIndex extends Component {
  componentDidMount() {
    this.props.readLanguages()
  }

  readRepositories(event, id) {
    event.preventDefault();
    this.props.readRepositories(id)
  }

  renderLanguages() {
    return _.map(this.props.languages, language => (
      <React.Fragment key={language.id}>
        |<Link to={`/languages/${language.id}`} onClick={(event) => this.readRepositories(event, language.id)}>{language.name}</Link>
      </React.Fragment>
    ))
  }

  render() {

    return (
      <React.Fragment>
        <table className="header-table">
          <tbody>
            <tr>
              <td>
                <img src="favicon.ico" alt="This describes OSS"/>
                <b className="hnname">
                  <a href="">OSS Project List</a>
                </b>
              </td>
              <td className="languages">
                {this.renderLanguages()}|
              </td>
            </tr>
          </tbody>
        </table>
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({ languages: state.languages })
const mapDispatchToProps = ({ readLanguages, readRepositories })

export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
```
* index.js
```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import './index.css';
import reducer from './reducers';

import RepositoriesIndex from './components/repositories_index';
import LanguagesIndex from './components/languages_index';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <React.Fragment>
      <LanguagesIndex />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RepositoriesIndex} />
          <Route path="/languages/:id" component={RepositoriesIndex} />
        </Switch>
      </BrowserRouter>
    </React.Fragment>
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();
```

[React] Linkコンポーネントを使用すると「You should not use <Link> outside a <Router>」といったエラーが表示される

### 解決したいこと
ReactコンポーネントのonClick属性に**メソッド**を入れた場合と**アロー関数**を入れた場合の違いを理解したい。

### きっかけとなったエラー
```js
class Prev extends Component {
  prev={
    position:"absolute",
    top:"50%",
    left:"25%",
    width:"50px",
    height:"50px",
    fontSize:"30px",
    cursor:"pointer",
  }
  
  prev() {
    return this.props.dispatch({type:'PREV'});
  }
  
  render() {
    return (
      <button style={this.prev} onClick={this.prev}>&lt;</button>...①
      <button style={this.prev} onClick={()=>this.props.dispatch({type:'PREV'})}>&lt;</button>...②
    );
  }
}

export default connect((state)=>state)(Prev);
```
**①**の場合では
Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.というエラーになってしまうが、
**②**の場合では
特にエラーはなくちゃんと動作しました。

### 自分考え
①の場合もオブジェクトを返していると思うのでエラー文の意味がわからなかった。

### どなたかわかる方いたらアドバイスしてくれると助かります。

ReactコンポーネントのonClick属性について

### 前提・実現したいこと
現在ポートフォリオ作成のための勉強しており、React.jsでReduxを導入してボタンをクリックするとステートが変更されるコードを記述しております。
参考書を見ながら記述しており、ブラウザ上で表示する際に以下のエラーが起きました。

### 発生している問題・エラーメッセージ

```
Failed to compile.

src/App.js
  Line 36:3:  'style' is not defined  no-undef
  Line 55:3:  'style' is not defined  no-undef

Search for the keywords to learn more about each error.
```

### 該当のソースコード

```JavaScript
import React,{ Component } from 'react';
import './App.css';
import { connect } from 'react-redux';

function mappingState(state){
  return state;
}

class App extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>
        <h1>Redux</h1>
        <Message />
        <Button />
      </div>
    );
  }
}
App = connect()(App);

class Message extends Component{
  style = { 
    fontSize:"20pt",
    padding:"20px 5px"
  }
  render(){
    return(
      <p style={this.style}>
        {this.props.message}: {this.props.counter}
      </p>
    );
  }
}
Message = connect(mappingState)(Message);
  

class Button extends Component{
    style = {
    fontSize:"16pt",
    padding:"5px 10px"
  }
  constructor(props){
    super(props);
    this.doAction = this.doAction.bind(this);
  }
  doAction(e){
    if (e.shiftKey){
      this.props.dispatch({type:'DECREMENT'});
    }else{
      this.props.dispatch({type:'INCREMENT'});
    }
  }
  render(){
    return(
      <button style={this.style} onClick={this.action}>click</button>
    )
  }
}
Button = connect()(Button);

export default App;
```

### 試したこと

- Reduxを導入する前までは、コンポーネントクラスにcss情報をオブジェクトにしてJSXにstyleを反映させることはできていたので、プロジェクトを作り直して再度Reduxを導入。
　→同じエラー
- スペルミスかと思い参考書の配布用ソースコードで、VSコードのCompare Active File with Clipbordで検証後、各所スペースの有無が見られたため、配布用ソースコードからindex.jsとApp.jsに対してコードをコピペして実行。
　→同じエラー
- 参考書で使用しているNode.js/Reduxのバージョンが現在のバージョン仕様が大きく異なり記述規則が違うのかと思い、バージョンによる変更内容を調べる。
参考書:node-10.14.0 redux-4.0.1 _ 自分:node-14.15.4 redux-4.0.5
　→仕様変更を見つけられず。

### 補足情報（FW/ツールのバージョンなど）
- node-14.15.4 
- redux-4.0.5 
- macOSを使用
##### Reduxを導入する際に用いたコマンド
- npm install --save redux
- npm install --save react-redux

Reactを用いたクリックに合わせて表示を変える機能のプログラムで、'is not defined  no-undef'のエラーを解決したい。

### 実現したいこと

- 一つの画面で複数のタブ（子コンポーネント）をもつ
- 子コンポーネントのクリックイベントによって、タブを増やす
　⇒親コンポーネント側で追加か？
- 非表示になっている開いていないタブについて、値を保持したい。
　⇒stateで保持したまま、表示・非表示を切り替えたい

- (追記)各タブの内容は、異なるコンポーネントで定義したい。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-04/7531b921-a857-480d-825b-9f3b32a11937.png)

### 前提

- React使用（ほかに良いライブラリがあればご教示願います）

### 調べてみた感想

 - Reduxを使う必要があるか
 - jsxの内容をmapで書く場合、非表示中のタブの内容を保持するのが難しい


react 動的にタブを増減できる画面を作成したいが実現可能か

ReduxのstateとRedux-formのformValuesで状態管理してる入力フォームを更新する時に、入力変更前と変更後を比較して差分だけ取り出してpostをしたいと思ってます。
lodashのomitByを使うと差分のあるキーバリューを取り出せますが、オブジェクトの中にある配列(下記のサンプルだとcにあたります)だと
差分が無い全てのキーバリューも取得してしまいます。
現状の入力フォームの仕様は全てのキーバリューをセットして送信してしまうので、複数人で入力して保存すると上書き保存され入力された項目が消えてしまいます。
下記のようなオブジェクトを取り出すことは可能でしょうか。

```js
■入力変更前のstate
let beforeData = {
    a:1,
    b:2,
    c:[
        { d:3, e:4, f:5 },
        { g:6, h:7, i:8}
    ],
    m: 9
};
■入力変更後のstate
let afterData = {
    a:1,
    b:12,
    c:[
        { d:3, e:4, f:5},
        { g:16, h:17, i:8}
        { j:9, k:10, l:11}
    ],
    m: 12
};
■差分だけ取り出したオブジェクト
let postData = {
    b:12,
    c:[
        { g:16, h:17 },
        { j:9, k:10, l:11}
    ],
    m:12
}
```

2つのオブジェクトを比較して差分だけ取り出したい

### 実現したいこと

- [ ] 動的ルーティングを使用して、記事詳細ページに、記事ID(postId)に紐づく、それぞれの記事を表示させたい

### 前提

Reactルーティングで簡単なページを作成しています。
App.jsx
Top.jsx
Posts.jsx(記事一覧ページ)
Post.jsx(記事詳細ページ)
Store.js(Redux)
記事一覧ページに表示している記事のIdに紐づいた記事を、動的ルーティングを使用して、記事詳細ページに表示させたいです。
記事はRedux（Store.js）で管理しています。



### 発生している問題・エラーメッセージ

```
Idの紐付け方が分かりません。
```

### 該当のソースコード

```ここに言語名を入力
import "./reset.css"
import AppStyle from "./App.module.css"
import { Routes, Route, Link } from "react-router-dom";
import Top from "./components/pages/top/Top";
import Posts from "./components/pages/posts/Posts";
import Post from "./components/pages/post/Post";
function App() {

  return (
    <div className={AppStyle.container}>
      <h1>React 7回目</h1>
      <nav className={AppStyle.nav}>
        <ul className={AppStyle.menu}>
          <li><Link to="/top">TOP</Link></li>
          <li><Link to="/Posts">記事一覧</Link></li>
          <li><Link to="/Post">記事詳細</Link></li>
        </ul>
      </nav>

      <Routes> 
        <Route path="/top" element={ <Top /> }></Route>
        <Route path="/posts" element={ <Posts /> }></Route>
        <Route path=":postId" element={ <Post /> }></Route>
      </Routes>
    </div>
  )
}

export default App
```

```
import postsStyle from "./posts.module.css"
import { useSelector } from 'react-redux';

const Posts =() => {

    const posts = useSelector((state) => state.posts);

    return (
        <div className={postsStyle.container}>
            <h2>記事一覧</h2>
            <div className={postsStyle.posts}>
                {posts.map((post) => (
                <div className={postsStyle.post} key={post.postId}>{post.postName}
                    <p className={postsStyle.post_text} key={post.postId}>{post.postDetail}</p>
                </div>
                ))}
            </div>
        </div>
    )
}

export default Posts
```
```ここに言語を入力
import postStyle from "./post.module.css"
import { useParams } from 'react-router-dom';


const Post =() => {

    const { postId } = useParams();

    return (
        <div className={postStyle.container}>
            <h2>記事詳細 {postId}</h2>
        </div>
    )
}

export default Post
```
```ここに言語を入力
import { createStore } from 'redux'

const initialState = {
    
  posts: [
    {
      postId: '1',
      postName: 'サンプル記事1',
      postDetail: 'サンプル記事1のテキスト',
    },
    {
      postId: '2',
      postName: 'サンプル記事2',
      postDetail: 'サンプル記事2のテキスト',
    },
    {
      postId: '3',
      postName: 'サンプル記事3',
      postDetail: 'サンプル記事3のテキスト',
    },
  ],
      
};

const reducer = (state = initialState) => {
    return state;
};

const store = createStore(reducer);
console.log(store.getState());

export default store;
```



React勉強中です。
至らない点も多々あるかと思いますが、ご教授いただけると幸いです。
宜しくお願い致します。
