常連

Reactを使用しているシステムで、使用されているコンポーネントをブラウザで確認することのできる拡張機能があれば教えてください。

wordpressプラグインの「Show Current Template」のようなイメージです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-14/78273ac0-af47-4b69-baf1-7ab67d2f3c26.png)

Reactを使用しているシステムで、使用されているコンポーネントをブラウザで確認することのできる拡張機能があれば教えてください

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

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

### 解決したいこと
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属性について

```ターミナル
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.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'のエラーを解決したい。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-12/42331658-90f9-488c-b55b-8bf820e475f6.png)### 実現したいこと
使用PC MacBook Air
①Reduxで自身のFinderに入っている画像を表示したい。
②別件になってしまいますが、ファイルをimportする際に使用できないファイル名などがあれば教えていただきたいです。

ファイル構成は画像を参照ください。


### 発生している問題・分からないこと
①Reduxで自分が用意した画像をsrcフォルダ以下のimgフォルダに入れてimgタグのsrc属性にパスを指定しましたが、画像が表示されません。
②ファイルimportについて
ファイルをimport/exportする際に時折一定のファイル名だとうまくいかない場合があります。
今までそこまで気にしていなかったのですが、質問させていただきます。
原因は不明ですが、大文字小文字の「i」などが関連した際にエラーが多く起きる気がします。
エラーが出るような(もしくはエラーはでないが正常に読み込まれない)仕様があれば教えていただきたいです。

「該当のソースコード」には本件のReduxを構成する4つのファイルを載せています。
toolkitなどのimport分やあまり関連の無いコードは記載を省いています。


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

```CartSlice.js
import cartItems from "../../cartitem";

const initialState = {
  cartItems: cartItems,
  amount: 4,
  total: 0,
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {},
});

  export default cartSlice.reducer;

```

```cartitem.js
↓SliceのinitialState値
const cartItems = [
  {
    id: 1,
    title: “テスト”,
    price: "12000",
    img: "./img/Test.jpg",
    amount: 1,
  },
  {
    〜〜〜省略〜〜〜
  },
];

export default cartItems;
```

```CartContainer.js

import Alist from './Alist';

const CartContainer = () => {
    const  { amount, cartItems, total } = useSelector((state) => state.cart)
    if( amount < 1 ) {
      return (
　　 〜〜〜省略〜〜〜
      );
    }

    return (
      <section className='cart'>
        <div>
          {cartItems.map((item) => {
            return <Alist key={item.id} {...item}/>
          })}
        </div>
      </section>
    )   
};

export default CartContainer
```

```Alist.js


const Alist = ({ id, img, title, price, amount }) => {
  return (
    <article className='cart-item'>
      <img src={img} alt="画像" />
        <h4>{img}</h4>
↑H4で{img}の内容を確認したところ、propsのimg(./img/Test.jpg)が受け取れていました。
      </div>
    </article>
  )
}

export default Alist

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
Reactで画像を表示さ得るにはパスをimportすると出てきたのですが、Reduxの場合それをどのように実装するのかというところです。
しかし、下記のようにApp.jsで試しに実施しても画像が表示されなかったので、画像表示に関して全く解決策がわからない状態です。
import test from './img/Test.jpg'
function App() {
  return (
    <main>
      <Navbar />
      <CartContainer />
      <img src="test" alt="テスト"/>
    </main>
  );
}
export default App;



### 補足
特になし

Reduxでの画像表示について

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