Question

嗨，我在调用子组件中的操作时遇到问题。

但是，我可以单独运行CompanyForm组件，并且可以运行，但是当被视为子组件时，我会遇到错误：

未捕获的TypeError：this.props.createCompany不是函数

Companies.js

render() {
    return (
        <div>
            <CompanyForm/>
        </div>
    );
}

CompanyForm.js

import { createCompany } from "../../actions/companyAction";
export class CompanyForm extends Component {
constructor(props) {
    super(props);

    this.state = {
        companyName: '',
        street1: '',
        street2: '',
        city: '',
        state: '',
        zipcode: ''
    };

    this.handleSubmit = this.handleSubmit.bind(this);
}


handleSubmit(event) {
    event.preventDefault();
    const company = {
        ...
    };
    console.log(company);
    this.props.createCompany(company)

}
}
export default connect(null, { createCompany })(CompanyForm);

companyActions.js

export const createCompany = (companyData) => dispatch => {
console.log('CREATE_COMPANY: ', companyData);
fetch('api/Company/Create', {
    ...
)};

Answer 1

将不带花括号的子组件导入父组件即

<!--Wrap <button>s in a tag-->
<section class='stage'>
  <button class="stage-detail">1</button>
  <button class="stage-detail">2</button>
  <button class="stage-detail">3</button>
  <button class="stage-detail">4</button>
  <button class="stage-detail">5</button>
  <button class="stage-detail">6</button>
</section>

<details id="brock1">ONE</details>
<details id="brock2">TWO</details>
<details id="brock3">THREE</details>
<details id="brock4">FOUR</details>
<details id="brock5">FIVE</details>
<details id="brock6">SIX</details>

不

import CompanyForm from '../component/companyForm/CompanyForm';

Answer 2

您必须同时导出组件和已连接的组件，以确保导入正确的组件。在这种情况下，最合适的是连接的组件。

this.props不是从父组件到子组件的函数还原

2 个答案: