Reactjs React-Redux-未捕获类型错误：无法读取未定义的属性“setState”

这是新的

我一直在寻找答案和答案

我也在使用Redux。根据良好实践，我有一个容器地址容器及其组件地址

该货柜的地址如下—

import React, { Component, PropTypes } from 'react'
        import { connect } from 'react-redux'
        import { Field, change } from 'redux-form'
        import { Col, Panel, Row } from 'react-bootstrap'
        import Select from 'react-select'

        import Address from './address'

        import { ensureStateData, getSuburbs } from './actions'

        import { CLIENT_FORM_NAME } from '../clients/client/client'

        export class AddressContainer extends Component {
          static contextTypes = {
            _reduxForm: PropTypes.object.isRequired,
          }

          constructor(props, context) {
            super(props, context)

            this.state = {
              selectedSuburb: null,
            }
          }

          componentDidMount() {
            this.props.ensureStateData()
          }

          // Manage asyncSelect for new data request - for suburbs.
          handleSuburbSearch = (query) => {
            const { addressData } = this.props
            const companyStateId = addressData.companyStateId

            if (!query || query.trim().length < 2) {

              return Promise.resolve({ options: [] })
            }
            const queryString = {
              query: query,
              companyStateId: companyStateId,
            }
            return getSuburbs(queryString)
              .then(data => {
                return { options: data }
              })
          }


          render() {
            const {
              initialValues,
              addressData,
              updatePostcodeValue,
            } = this.props


            //const { value } = this.state
            const sectionPrefix = this.context._reduxForm.sectionPrefix


            if (addressData.isLoading || !addressData.states.length) {
              return (
                <p>Loading</p>
              )
            }
            if (addressData.error) {
              return (
                <p>Error loading data</p>
              )
            }


            const companyStateId = addressData.companyStateId
            //  initialValues = {
            //    ...initialValues.Address=null,
            //    state: addressData.states.find(option => option.stateId === companyStateId),
            //  }


            return (
              <Address 
                initialValues={initialValues}
                addressData={addressData}
                handleSuburbSearch={this.handleSuburbSearch}
              />
            )
          }
        }
        const mapStateToProps = (state) => ({
          initialValues: state.address,
          companyStateId: state.companyStateId,
          addressData: state.addressData,
        })

        const mapDispatchToProps = (dispatch) => ({
          ensureStateData: () => dispatch(ensureStateData()),
          getSuburbs: (values) => dispatch(getSuburbs(values)),
          updatePostcodeValue: (postcode, sectionPrefix) => dispatch(change(CLIENT_FORM_NAME, `${sectionPrefix ? (sectionPrefix + '.') : ''}postcode`, postcode))
        })

        export default connect(mapStateToProps, mapDispatchToProps)(AddressContainer)

import React, { Component, PropTypes } from 'react'
      import { connect } from 'react-redux'
      import { Field, reduxForm, change } from 'redux-form'
      import { Col, Panel, Row } from 'react-bootstrap'
      import Select from 'react-select'
      import FormField from '../formComponents/formField'
      import TextField from '../formComponents/textField'
      import StaticText from '../formComponents/staticText'

      export const ADDRESS_FORM_NAME = "Address"

      export const Address = (props) => {
        const { addressData, handleSuburbSearch } = props
        const { reset } = props

        return (
          <Panel header={<h3>Client - Address Details</h3>}>
            <Row>

              <Field component={TextField}
                name="address1"
                id="address1"
                type="text"
                label="Address Line 1"
                placeholder="Enter street 1st line..."
                fieldCols={6}
                labelCols={3}
                controlCols={9}
              />
              <Field component={TextField}
                name="address2"
                id="address2"
                type="text"
                label="Address Line 2"
                placeholder="Enter street 2nd line..."
                fieldCols={6}
                labelCols={3}
                controlCols={9}
              />
            </Row>
            <Row>
              <Field
                component={props => {
                  const { input, id, placeholder, type } = props
                  const { fieldCols, labelCols, controlCols, label, inputClass } = props
                  // just the props we want the inner Select textbox to have
                  const { name, onChange } = input
                  const onStateChange = (state) => {
                    console.log('onStateChange', state)
                    onChange(state)
                  }

                  return (
                    <FormField
                      id={id}
                      label={label}
                      fieldCols={fieldCols}
                      labelCols={labelCols}
                      controlCols={controlCols}
                      inputClass={inputClass}
                    >
                      <Select
                        name={name}
                        onChange={onStateChange}
                        placeholder="Select state"
                        valueKey="id"
                        options={addressData.states}
                        labelKey="stateLabel"
                        optionRenderer={option => `${option.stateShortName} (${option.stateName})`}
                        value={input.value}
                        selectValue={Array.isArray(input.value) ? input.value : undefined}
                      />

                    </FormField>
                  )
                }}
                name="state"
                id="state"
                label="State."
                fieldCols={6}
                labelCols={3}
                controlCols={6}
              />

            </Row>
            <Row>
              <Field
                component={props => {
                  const { input, id, placeholder, type } = props
                  const { fieldCols, labelCols, controlCols, label, inputClass } = props
                  const { name, value, onChange, onBlur, onFocus } = input
                  const inputProps = {
                    name,
                    value,
                    onChange,
                    onBlur,
                    onFocus,
                  }
                  const onSuburbChange = (value) => {
                    console.log('onSuburbChange: ', value)
                    this.setState({ selectedSuburb: value }, () => {
                      input.onChange(value)
                      updatePostcodeValue(value ? value.postcode : null, sectionPrefix)
                    })
                  }

                  return (
                    <FormField
                      id={id}
                      label={label}
                      fieldCols={fieldCols}
                      labelCols={labelCols}
                      controlCols={controlCols}
                      inputClass={inputClass}
                    >
                      <Select.Async
                        {...inputProps}
                        onChange={onSuburbChange}
                        valueKey="id"
                        labelKey="suburbName"
                        loadOptions={handleSuburbSearch}
                        backspaceRemoves={true}
                      />
                    </FormField>
                  )
                }}
                name="suburb"
                id="AddressLocation"
                label="Suburb."
                fieldCols={6}
                labelCols={3}
                controlCols={9}
              />

            </Row>
            <Row>
              <Field component={StaticText}
                name="postcode"
                id="postcode"
                label="Postcode."
                fieldCols={6}
                labelCols={3}
                controlCols={9}
              />

            </Row>
          </Panel>
        )

      }

      Address.propTypes = {
        handleSuburbSearch: PropTypes.func.isRequired,
      }

      const AddressForm = reduxForm({
        form: ADDRESS_FORM_NAME,
      })(Address)

      export default AddressForm

您将注意到有一个console.log作为值。这将产生以下结果：

onSuburbChange:Object{id:6810，suburbName:Eaglehawk，邮政编码：3556，州：VIC}

我使用React Select作为异步下拉列表。这一切都有效。如果我选择一个选项，我会得到下拉选项，但选择一个，它会给我错误

我在这里使用react state作为选项，因为我不需要用它来更新redux-只需react state

---

看起来没问题，但我还是发现了错误。为什么会出现此错误以及如何修复此错误？

此特定错误是由于组件是无状态功能组件，并且其中不能包含this.state对象或setState函数造成的。但是，更一般地说，您希望组件的状态和函数对子组件可用，但这是不可能的。在这种情况下，您希望通过对子对象调用setState来修改父对象的状态

在这种情况下，子React组件将只具有来自其父组件的状态/函数/属性，这些状态/函数/属性将作为道具显式传递给该组件。如果要更改组件的本地状态，必须在具有本地状态的组件上进行。如果您想让子组件触发父组件上的某种类型的函数调用，那么该函数必须作为道具传递给子组件，子组件可以调用它

如果我正确理解了您的代码，那么在更改表单字段时，您希望按以下顺序发生3件事情

将更新上选定的郊区状态。 将触发中Redux表单的onChange。 updatePostCode操作被触发。 如果正确，则需要将onSuburbChange移动到，并将其作为道具传递给。但是，您不能在内部调用Redux表单的onChange。因此，您可以使该函数期望收到一个回调函数，该函数将在状态更新后被触发。然后可以在子组件中定义回调，但在父组件中定义状态更改函数。只要您在父级上传递所需的道具，例如updatePostCode和sectionPrefix，您将获得金牌。下面是它的外观：

地址容器

地址

---

正如您所看到的，组件中不同的props变量之间存在命名冲突，因此我调用main props addressProps来避免这种情况。

您正在为无状态功能组件设置状态，这就是为什么它会出现此错误。请详细说明。我不确定如何纠正这一点。我想我在容器中设置了状态，特别是在onSuburbChange的构造函数中。我该怎么解决这个问题。。

         const onSuburbChange = (value) => {
          console.log('onSuburbChange: ', value)
          this.setState({ selectedSuburb: value }, () => {
            input.onChange(value)
            updatePostcodeValue(value ? value.postcode : null, sectionPrefix)
          })
        }

export class AddressContainer extends Component {
  /* Everything else in this component */

  onSuburbChange = (value, callback) => {
    this.setState({ selectedSuburb: value }, callback);
  }

  render() {
    /* Other stuff inside render */

    return (
      <Address 
        initialValues={initialValues}
        addressData={addressData}
        handleSuburbSearch={this.handleSuburbSearch}
        onSuburbChange={this.onSuburbChange}
        updatePostcodeValue={this.props.updatePostcodeValue}
        sectionPrefix={sectionPrefix}
      />
    );
  }
}

export const Address = (addressProps) => {
  return (
    /* All other JSX */

    <Field
      component={props => {
        const { input } = props;

        const handleSuburbChange = (value) => {
          addressProps.onSuburbChange(value, () => {
            input.onChange(value);
            addressProps.updatePostcodeValue(value ? value.postcode : null, addressProps.sectionPrefix)
          });
        }

        return (
          <Select.Async
            onChange={handleSuburbChange}
          />
        )
      }}
  );
}