Question

我有一个组件，我试图用我的道具中的一些选项填充<Select />组件。当组件安装时，我将jobNumbers的状态设置为空数组。

我有两个下拉列表，其中一个值取决于另一个选定值。选择该值后，我运行onChange函数来填充第二个下拉列表。唯一的问题是当我执行this.setState({jobNumbers: [...array elements...]})时，状态仍然显示jobNumbers数组为空。实际执行状态设置的功能是getCustomerOptions()。

这是我的整个组件（它不是太长了）

import React from 'react';
import SelectInput from '../../components/SelectInput';
import LocationSelector from '../../components/LocationSelector';
import { Field } from 'redux-form/immutable';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

class InputCurrentCustomerLocation extends React.Component { 
  constructor(props) {
    super(props);

    this.state = {
      jobNumbers: [],
    };

    this.getCustomerOptions = this.getCustomerOptions.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  componentWillMount() {
    if (this.props.active) {
      this.props.input.onChange(this.props.active);
    }
  }

  onChange(event) {
    if (this.props.input.onChange) {
      this.props.input.onChange(event.value); // <-- To be aligned with how redux-form publishes its CHANGE action payload. The event received is an object with 2 keys: "value" and "label"
      // Fetch our Locations for this customer
      this.props.handleCustomerLocationFetch(event.value);

      this.getCustomerOptions(event);
    }
  }


  getCustomerOptions(event) {
    let options = [];

    if(event) {
      this.props.options.forEach((option, index) => {
        if(option.value === event.value) {
          console.log('props options', this.state);
          this.setState({ jobNumbers: this.props.options[index] });
         console.log('state options', this.state);
        }
      })
    }
  }


  render() {
    const { meta } = this.props;
    return (
      <div>
        <Select
          options={this.props.options} // <-- Receive options from the form
          {...this.props}
          value={this.props.input.value || ''}
          // onBlur={() => this.props.input.onBlur(this.props.input.value)}
          onChange={this.onChange.bind(this)}
          clearable={false}
        />
        {meta.error && <div className="form-error">{meta.error}</div>}

        {this.props.activeLocations ? false : (
          <div>
          <div>
            <p> Select a location </p>
            <Field
              name="locations"
              component={props =>
                <LocationSelector
                  {...props}
                  // active={this.props.activeLocations}
                  locations={this.props.locations}
                />
              }
            />
          </div>
          <div>
            <p> Select a job number</p>

            <Field
              name="jobNumber"
              component={props =>
                <Select
                  options={this.state.jobNumbers}
                  value={this.props.input.value || ''}
                  onChange={this.onChange.bind(this)}
                  clearable={false}
                />
              }
            />
          </div>
        </div>
        )}

      </div>
    );
  }
}

export default InputCurrentCustomerLocation;

我对React和redux相对较新，我不完全确定为什么会这样。不应该填充国家吗？

Answer 1

this.setState({ jobNumbers: this.props.options[index] });

是异步的。因此，当您在setState之后执行控制台登录状态时，状态仍然无法更改。你应该检查componentDidUpdate（prevProps，prevState）上的值，并在那里打印。

React - Redux表单 - 状态设置但几乎立即重置

1 个答案: