React - Redux窗体 - 状态得到设置，但几乎立即重置

问题描述：

我有一个组件，其中我试图用我的道具中的一些选项填充<Select />组件。当组件挂载时，我将jobNumbers的状态设置为空数组。React - Redux窗体 - 状态得到设置，但几乎立即重置

我有两个下拉列表，其值取决于另一个选定的值。当选择该值时，我运行一个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;

我是比较新的反应，终极版，我不完全知道为什么发生这种情况。国家不应该填充？

你为什么要在forEach中调用setState？ –

截至目前，这是如何检查一场比赛是如何发生的，只有在比赛中应该设置状态。我最终要做的就是访问'this.props.options'中的特定索引。这是否需要国家的东西？ –

答

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

是异步的。所以当你做一个控制台登录setState后的状态时，状态仍然不会改变。您应该检查componentDidUpdate（prevProps，prevState）上的值，并将其打印在那里。

React - Redux窗体 - 状态得到设置，但几乎立即重置

相关推荐