javascript - 为什么我的一个子组件能够获取handleClick()，但其他子组件却不能？

Question

问题

我正在根据仪表板(父)组件中的状态交换组件并将 Prop 传递给所有组件。当我使用批发商登录时，应用程序运行没有问题，但当我使用零售商帐户登录时，应用程序返回

TypeError: this.props.handleClick is not a function

当我点击按钮handleClick()时 -> 通过handleClick切换组件，从而改变状态

我的组件几乎相同，但我不知道这是从哪里来的。

提前谢谢您! :)

文件:

Dashboard.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Retailers } from './_components/Retailers'
import { Locations } from './_components/Locations'
import { Products } from './_components/Products'

class Dashboard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      chosenRetailerId: null,
      chosenLocationId: null,
      mountComponent: ''
    }

    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount() {
    switch (this.props.user.type) {
      case 'wholesaler':
        this.setState({ mountComponent: "retailers" })
        break;
      case 'retailer':
        this.setState({ mountComponent: "locations" })
        break;
      case 'location':
        this.setState({ mountComponent: "products" })
        break;
      default:
        break;
    }
  }

  handleClick(id, shouldMountComponent) { 
    switch (shouldMountComponent) {
      case 'locations':
        this.setState({
          mountComponent: shouldMountComponent,
          chosenRetailerId: id
        })
        break;
      case 'products':
        this.setState({
          mountComponent: shouldMountComponent,
          chosenLocationId: id
        })
        break;
      default:
        break;
    }
  }

  render() {
    const { user } = this.props
    const { chosenLocationId, chosenRetailerId, mountComponent } = this.state

    return (
      <div className="dashboard">
        {user.type === 'wholesaler' &&
          <div className="wholesaler">
            <h1>Wholesaler</h1>
            <h3>{user._id}</h3>
            {this.state.mountComponent === 'retailers' &&
            <Retailers mountComponent={mountComponent} handleClick={this.handleClick} />
            }
            {this.state.mountComponent === 'locations' &&
            <Locations retailerId={chosenRetailerId} locationId={chosenLocationId} mountComponent={mountComponent} handleClick={this.handleClick} />
            }            
            {this.state.mountedComponent === 'products' &&
            <Products locationId={chosenLocationId} mountComponent={mountComponent}/>
            }
          </div>
        }
        {user.type === 'retailer' &&
          <div className="retailers">
            <h1>Retailer {user._id}</h1>
            <Locations locationId={chosenLocationId}/>
          </div>
        }
        {user.type === 'location' &&
          <div className="locations">
            <h1>Location {user._id}</h1>
            <Products />
          </div>
        }
        <p>You're logged in with React & JWT!!</p>
        <p>
          <Link to="/login">Logout</Link>
        </p>
      </div>
    )
  }
}

function mapStateToProps(state) {
  const { authentication } = state
  const { user } = authentication

  return {
      user
  }
}

const connectedDashboard = connect(mapStateToProps)(Dashboard)
export { connectedDashboard as Dashboard }

Retailers.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Retailers extends Component {
    state = {
        retailers: []
    }

    componentDidMount() {
        const { user } = this.props

        const requestOptions = {
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + user.token }
        }

        fetch(`http://localhost:4000/retailers/by-wholesaler/${user._id}`, requestOptions)
            .then(result => result.json())
            .then(result => {
                this.setState({
                    retailers: result
                })
            })
    }

    render() {
        const { retailers } = this.state

        return (
            <div className="retailers">
                {retailers.map((retailer, index) =>
                <button key={index} onClick={() => this.props.handleClick(retailer._id, 'locations')}>{retailer.name}</button>
                )}
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { authentication } = state
    const { user } = authentication

    return { user }
}

const connectedRetailers = connect(mapStateToProps)(Retailers)
export { connectedRetailers as Retailers }

Locations.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Locations extends Component {
    state = {
        locations: []
    }

    componentDidMount() {
        const { user } = this.props

        const requestOptions = {
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + user.token }
        }

        const retailerId = (user.type === 'retailer') ? user._id : this.props.retailerId
        console.log(retailerId)

        fetch(`http://localhost:4000/locations/by-retailer/${retailerId}`, requestOptions)
            .then(result => result.json())
            .then(result => {
                this.setState({
                    locations: result
                })
            })
    }

    render() {
        const { locations } = this.state

        return (
            <div className="locations">
                {locations.map((location, index) =>
                <button key={index} onClick={() => this.props.handleClick(location._id, 'products')}>{location.name}</button>
                )}
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { authentication } = state
    const { user } = authentication

    return { user }
}

const connectedLocations = connect(mapStateToProps)(Locations)
export { connectedLocations as Locations }

Answer 1

您必须将 handleCLick 作为 prop 传递给 location。您可以在批发商的情况下执行此操作(将其传递给零售商组件)，但在使用位置组件时则不需要这样做