Javascript React道具给我错误：无法分解属性'；调度'；属于'；道具'；因为它是未定义的

我不明白为什么会出现这个错误，因为它们都是我在其他组件中使用的选择器。这个组件基本上是另一个组件的副本。我的印象是，{}=props中的props来自我导入的选择器

但我得到了这个错误

无法对“props”的属性“exchange”进行分解，因为它未定义。

对于我试图传递给

{}=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);

import React，{Component}来自“React”
从“react redux”导入{connect}
从“react bootstrap”导入{OverlayTrigger，工具提示}
从“./Spinner”导入微调器
进口{
allTokensLoadedSelector，
所有令牌选择器，
web3Selector，
交换选择器
}来自“../store/selectors”
从“../store/interactions”导入{loadToken}
const showTokens=（数据、道具）=>{
const{dispatch，exchange，web3}=props
返回(
{data.allTokens.map（（令牌）=>{
返回(
loadToken（web3，exchange，token.tokenAddress，dispatch）}
>
{token.symbol}/ETH
)
})}
)
}
类市场扩展组件{
render（）{
console.log（this.props.exchange）
返回(
市场
{this.props.showTokens？showTokens（this.props）：
}
)
}
}
函数MapStateTops（状态）{
const tokensLoaded=allTokensLoadedSelector（状态）
返回{
showTokens：标记已标记，
allTokens:allTokensSelector（状态），
web3:web3选民（州），
交换：交换选择器（状态），
}
}
导出默认连接（MapStateTops）（市场）；

---

那么，我要去哪里解决这个问题呢？我不明白。

现在你处在一个奇怪的中间地带，

showTokens

只是一个函数，但你希望它是一个函数组件，所以让我们把它变成一个函数组件

因为它现在是一个组件，所以需要一个CamelCase名称。它需要一个参数，它是道具的对象，我们可以立即分解这些道具。改变

const showTokens = (data, props)

到

allTokens

现在是顶级道具（不是数据属性），所以更改

data.allTokens.map

到

我们希望使用JSX语法调用该组件，并希望通过

Market

从

mapstatetops

获得的所有道具。改变

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

到

this.props.showtokes？

showTokens

有两个参数，您只传递一个。因此，第二个参数，

props

，在默认情况下是未定义的。然后你试着解构它，所以这是导致错误的原因。那么我如何向它传递道具呢？@Jayce444我已经添加了evrything。如果我尝试将数据也传递给showTokens，它会说它未定义。

showTokens

函数期望的“数据”是什么/在哪里？我得到了！从那里移除数据并将其传递给道具！

allTokens.map

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

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