Fehler erhalten "Versand ist keine Funktion" beim Kombinieren von zwei Dateien [ReactJS]

Question

Ich erstelle eine Todo-Liste Anwendung mit Hilfe von reactJS. Wenn ich zwei verschiedene Logik in zwei separate Dateien schreibe, funktioniert es gut, aber beim Kombinieren dieser beiden Dateien gibt es einen Fehler.

RenderRemaining.js Datei:

import React from 'react'; 
import { connect } from 'react-redux'; 
import store from '../store/store'; 
import RenderRemainingData from './RenderRemainingData'; 

const RenderRemaining = (props) => { 
    return (
     <div> 
      <h2>Tasks: </h2> 
      <hr /> 
      {props.list.map((detail) => { 
       return <RenderRemainingData key={detail.id} {...detail} /> 
      })} 
     </div> 
    ); 
} 

const mapStateToProps = (state) => { 
    return { 
     list: state.todoReducer 
    }; 
} 

export default connect(mapStateToProps)(RenderRemaining); 

RenderRemainingData.js Datei:

import React from 'react'; 
import { connect } from 'react-redux'; 
import removeTodo from '../actions/removeTodo'; 

const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => { 
    if (!isCompleted) { 
     return (
      <div key={id}> 
       <h4>{todo} 
        <span className="float-right"> 
         <a href="#" title="Remove" onClick={() => { 
          dispatch(removeTodo({todo, description, id})); 
         }}><i className="fas fa-times"></i></a> 
        </span> 
       </h4> 
       <p>{description}</p> 
      </div> 
     ); 
    } 
    return false; 
} 

export default connect()(RenderRemainingData); 

oben Code Jetzt nur noch gut funktioniert.

Nach der Kombination oben zwei Dateien als eine js-Datei in RenderRemaining.js und löschen RenderRemainingData.js Datei.

RenderRemaining.js Datei: (nach dem Kombinieren)

import React from 'react'; 
import { connect } from 'react-redux'; 
import store from '../store/store'; 
import removeTodo from '../actions/removeTodo'; 

const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => { 
    if (!isCompleted) { 
     return (
      <div key={id}> 
       <h4>{todo} 
        <span className="float-right"> 
         <a href="#" title="Remove" onClick={() => { 
          dispatch(removeTodo({todo, description, id})); 
         }}><i className="fas fa-times"></i></a> 
        </span> 
       </h4> 
       <p>{description}</p> 
      </div> 
     ); 
    } 
    return false; 
} 

const RenderRemaining = (props) => { 
    return (
     <div> 
      <h2>Tasks: </h2> 
      <hr /> 
      {props.list.map((detail) => { 
       return <RenderRemainingData key={detail.id} {...detail} /> 
      })} 
     </div> 
    ); 
} 

const mapStateToProps = (state) => { 
    return { 
     list: state.todoReducer 
    }; 
} 

connect()(RenderRemainingData); 
export default connect(mapStateToProps)(RenderRemaining); 

Nun, wenn ein Ereignis von onClick tritt ein Fehler als dispatch is not a function in der Konsole gibt.

Ich weiß nicht, warum das passiert.

Answer 1

Dies liegt daran, wenn Sie die RenderRemainingData Komponente innerhalb RenderRemaining rendern Sie die dispatch, aber im Falle von separaten Datei sind vorbei, Komponente wird die Versendung von connect erhalten.

Mögliche Lösungen:

1- Übergeben Sie den Versand in Requisiten RenderRemainingData Komponente:

return <RenderRemainingData key={detail.id} {...detail} dispatch={props.dispatch} /> 

und entfernen Sie diese Zeile:

connect()(RenderRemainingData); 

2- Eine andere mögliche Lösung ist :

Verwenden Sie eine Wrapper-Komponente, und rendern Sie diese Wrapper-Komponente RenderRemainingData. Wie folgt aus:

const WrapperRenderRemainingData = connect()(RenderRemainingData); 

return <WrapperRenderRemainingData key={detail.id} {...detail} /> 

Answer 2

connect()(SomeRandomComponent) Aufruf bedeutet, dass Sie den Aufruf einer Funktion, die Sie geben einen Wert zurück, eine neue Komponente, die Sie verwenden können.

Also im Fall von zwei separaten Dateien, zuerst erstellen Sie eine neue Komponente mit connect()(RenderRemainingData), dann exportieren Sie den Rückgabewert.

Diese beiden sind gleichwertig.

export default connect()(SomeRandomComponent) 

und

const newComponent = connect()(SomeRandomComponent) 
export default newComponent 

Nun, wenn wir am Ende der Dateien suchen den kombinierten Code enthält.

connect()(RenderRemainingData); 
export default connect(mapStateToProps)(RenderRemaining); 

Erster Ausdruck, schafft eine newComponent von connect um RenderRemainingData wickeln. Aber da du den Rückgabewert nicht einem neuen Bezeichner zugewiesen hast oder RenderRemainingData (kannst du nicht, weil Letzteres übrigens ein const ist). Wenn Sie einen function als Parameter übergeben, wird er als Wert übergeben, so dass die Änderung der Parameterfunktion in der aufrufenden Funktion die Verwendung außerhalb der aufrufenden function nicht beeinflusst.

Die einfachste Lösung für Sie wird die unten erwähnte sein.

const RenderRemainingData = connect()(props => { 

    ///Add the implementation here 

}) 

Dort gehen Sie, Sie eine angeschlossene Komponente in der gleichen Datei, mit Versand zur Verfügung.