Question

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

但是我遇到了这个错误；

Cannot destructure property 'exchange' of 'props' as it is undefined. 对于我要传递给{ } = 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);

所以我必须去哪里解决这个问题，我不明白。

Answer 1

现在，您处于一个奇怪的中间地带，showTokens只是一个函数，但是您希望它成为一个函数组件，因此让我们使其成为一个函数组件。

由于它现在是组件，因此需要一个CamelCase名称。它需要接受一个作为道具对象的参数，并且我们可以立即破坏这些道具。更改

const showTokens = (data, props)

到

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

allTokens现在是顶级道具（不是数据的属性），因此请更改

data.allTokens.map

到

allTokens.map

我们要使用JSX语法调用该组件，并且要遍历Market从mapStateToProps获得的所有道具。更改

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

到

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

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

1 个答案: