React props 给我错误：无法解构“props”的属性“dispatch”，因为它未定义

Question

I dont understand why I'm getting this error because they are all selectors I am using in other components. And this component is basically a copy of another one. I was under the impression that the props in { } = props where coming from my imported selectors.

But i'm getting this error;

Cannot destructure property 'exchange' of 'props' as it is undefined. And it's the same error for any props i'm trying to pass to { } = props .

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import Spinner from './Spinner'
import {
    allTokensLoadedSelector,
    allTokensSelector,
    web3Selector,
    exchangeSelector
} from '../store/selectors'
import { loadToken } from '../store/interactions'

const showTokens = (data, props) => {
    const { dispatch, exchange, web3 } = props
    return (

    <tbody>
        { data.allTokens.map( (token) => {
            return(
            <OverlayTrigger trigger={['hover', 'focus' ]} key={token.tokenId} placement='top' overlay={ <Tooltip className="tooltip" id={token.TokenId}>
                {`Click to load ${token.symbol} market`}
                    </Tooltip>
                }
                >
                <tr key={token.tokenId} className="order-book-order" onClick={(e)=> loadToken(web3, exchange, token.tokenAddress, dispatch)}
                    >
                    <td>{token.symbol}/ETH</td>
                </tr>
            </OverlayTrigger>
            )
        })}
    </tbody>
    )
}

class Market extends Component {
    render() {
        console.log(this.props.exchange)
        return (
        <div className="vertical">
            <div className="card bg-transparent text-white">
                <div className="card-header">
                    Market
                </div>
                <div className="card-body order-book">
                    <table className="table bg-transparent text-white table-sm small">
                        { this.props.showTokens ? showTokens(this.props) :
                        <Spinner type='table' /> }
                    </table>
                </div>
            </div>
        </div>
        )
    }
}

function mapStateToProps(state) {
    const tokensLoaded = allTokensLoadedSelector(state)
    return {
        showTokens: tokensLoaded,
        allTokens: allTokensSelector(state),
        web3: web3Selector(state),
        exchange: exchangeSelector(state),
    }
}

export default connect(mapStateToProps)(Market);

So where do I have to look to fix this I dont get it.

Answer 1

Right now you're in this weird middle ground where showTokens is just a function but you want it to be a function component, so let's make it a function component.

Since it's now a component, it needs a CamelCase name. It needs to take one argument which is an object of props, and we can destructure those props immediately. Change

const showTokens = (data, props)

to

const ShowTokens = ({dispatch, exchange, web3, allTokens})

allTokens is now a top-level prop (not a property of data), so change

data.allTokens.map

to

allTokens.map

We want to call the component using JSX syntax, and we want to pass through all of the props which Market got from mapStateToProps . Change

this.props.showTokens ? showTokens(this.props)

to

this.props.ShowTokens ? <ShowTokens {....this.props}/>