Redux：在 mapDispatchToProps 中传递的函数“不是函数”

Question

我正在使用 redux 设置一个简单的 React 应用程序。我可以访问我的商店并将它们作为道具传递给组件，但我似乎无法让组件识别 mapDispatchToProps 中的函数。我只想在孩子内调用函数searchCompanywith onClick。任何建议表示赞赏。

这里是父组件：

class ResearchContainer extends React.Component {

    render() {
        return <CompanyFinancials test={this.handleTest} props={this.props} />
    }
}

const mapStateToProps = state => {
    return {
        researchCompany: state.researchCompany
    }
}

const mapDispatchToProps = dispatch => {
    return {
        searchCompany: (ticker) => {
            dispatch(operations.getAndSetResearchCompany(ticker))
        },
        getResearchCompany: (ticker) => {
            dispatch(operations.getResearchCompany(ticker))
        }
    }
}
    
export default connect(mapStateToProps, mapDispatchToProps)(ResearchContainer);

这是孩子。我已经尝试解构道具并直接访问作为健全性检查。

class CompanyFinancials extends React.Component {

  render() {
    const {
      researchCompany,
      searchCompany
    } = this.props

    let ticker = null;

    return (
      <div className="generalPage">
          <h2 className="pageHeader">{ ticker != '' ? `${ticker} Financials` : 'Research A Company' }</h2>
          <div className="companySearch-research">
            <div className="rightSideGrid-watchList-header">Search By Ticker</div>
            {/* <Button style={{backgroundColor:'red'}}onClick={() => bloombergInfo()}>Get Bloomberg Info</Button> */}

            <Formik className="ticker-input" initialValues={{ tickerInput: '' }} 
              validate={values => validateTicker(values)} validateOnChange={false} validateOnBlur={false}
              onSubmit={(values, { setSubmitting }) => {
                  // searchCompany(values.tickerInput.toUpperCase());
                  setSubmitting(false);
              }}
            >
              {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting,
                /* and other goodies */
              }) => (
                <form autoComplete="off" onSubmit={handleSubmit}>
                  {/* <TextField id="outlined-basic" label="Outlined" variant="outlined" type="ticker" value={values.tickerInput}
                  onBlur={handleBlur} onChange={event => changeTickerInput(event.target.value)}/> */}
                  <TextField className="tickerInput" size="small" label="Ticker" variant="outlined" name="tickerInput"
                    value={values.tickerInput} onChange={handleChange}/>
                  <Button className="tickerSearchBtn" type="submit" 
                    onClick={() => this.props.searchCompany(values.tickerInput.toUpperCase())}
                  >
                    Search
                  </Button>
                  <div className="form-error">{errors.tickerInput}</div>
                </form>
              )}
            </Formik>
          </div>
      </div>
      );
    }
}

我还包括子组件中的日志道具。

错误是：

CompanyFinancials.js:62 Uncaught TypeError: this.props.searchCompany is not a function
at onClick (CompanyFinancials.js:62)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates$1 (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)

Answer 1

问题

您将注入的researchCompany、searchCompany 和getResearchCompany 属性传递给CompanyFinancials 上的props 属性。

class ResearchContainer extends React.Component {
  render() {
    return <CompanyFinancials test={this.handleTest} props={this.props} />
  }
}

因此，在孩子中，他们需要从 props.props 属性访问为 this.props.props.searchCompany。 this.props.searchCompany 未定义。

解决方案

通过 Spread 语法将所有道具传递给孩子

class ResearchContainer extends React.Component {
  const { props } = this;
  render() {
    return <CompanyFinancials test={this.handleTest} {...props} />
  }
}

或者明确地传递它们。

class ResearchContainer extends React.Component {
  const { researchCompany, searchCompany, getResearchCompany } = this.props;
  render() {
    return (
      <CompanyFinancials
        test={this.handleTest}
        researchCompany={researchCompany}
        searchCompany={searchCompany}
        getResearchCompany={getResearchCompany}
      />
    );
  }
}

或者直接装饰CompanyFinancials，这样就可以注入正确的道具，而您无需担心是否正确代理它们。

connect(mapStateToProps, mapDispatchToProps)(CompanyFinancials);