ReactJS您必须将组件传递给connect返回的函数

Question

You must pass a component to the function returned by connect. Instead received {"id":"-LGZkSJah62kXrfUl-6u","teamA":"England","teamB":"England"}

So the function returned by connect is 'initAddMatchResult'. Why is it not approprite to pass the team variables?

Hi, I am creating a React application with redux and getting the error ..You must pass a component to the function returned by connect. Instead received {"id":"-LGZkSJah62kXrfUl-6u","teamA":"England","teamB":"England"}

I have a function on my component which correctly calls

addMatchResultHandler = (id, teamAName, teamBName) => {
    this.setState({
        inputtingResult: true
    })
    this.props.onAddMatchResult( id, teamAName, teamBName);
}

the action to dispatch ..

const mapDispatchToProps = dispatch => {
    return {
        onFetchUpcomingMatches: () => dispatch(actions.fetchUpcomingMatches()),
        onAddMatchResult: (matchID, teamAName, teamBName ) => dispatch(actions.initAddMatchResult(matchID, teamAName, teamBName))
    }
}

export const initAddMatchResult = ( matchID, teamAName, teamBName  ) => {
    return {
        type: actionTypes.INIT_MATCH_RESULT_INPUT,
        matchId: matchID,
        teamAName: teamAName,
        teamBName: teamBName
    };
}

which correctly updates the state in the reducer.

const initAddMatchResult = ( state, action ) => {
    return updateObject( state, {
        selectedMatchForUpd: {
            matchID: action.matchId,
            teamAName: action.teamAName,
            teamBName: action.teamBName
        }
    } );
}

I have confirmed in redux that selectedMatchForUpd is getting updated with the correct values. So why is this error being thrown? any help would be much appreciated.

Answer 1

Arghh I wasn't ....

I had export default connect(mapStateToProps, mapDispatchToProps(MatchResultInput));

I should have sorted that one myself. Thanks.