React + Redux - 在初始加载时触发选择onChange（）

Posted 2021-04-18

我是React和Redux的新手，请原谅我，如果答案是微不足道的，但经过广泛的搜索，我似乎找不到这个简单问题的好答案。我有多个级联选择，其中基于先前的选择填充数据。当用户更改所选选项时，一切正常。但是，当第一次选择初始加载的数据时，我无法弄清楚如何触发onChange事件？这是简化的组件：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { locationActions } from '../../_actions';
import { Input, Col, Label, FormGroup } from 'reactstrap';

class HeaderSetup extends React.Component {
  constructor(props) {
    debugger;
    super(props);        
    this.state = { location: 'Select an Option'};
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loading !== this.props.loading &&
        nextProps.success !== this.props.success &&
        !nextProps.loading && nextprops.success) {
      this.setState({ location: '' });
    }
  }

  onLocationChanged(e) {
    console.log(e.target.value);    
  }

  render() {
    const { locations } = this.props;
    return (
      <FormGroup row>
        <Label for="locations" sm={3}>Locations</Label>
        <Col sm={8}>
        {locations.items &&                    
          <Input type="select" name="locations" id="locations" 
                onChange={this.onLocationChanged} 
                value={this.state.location}>
              {locations.items.map((location, index) =>
                  <option key={location.id}>
                      {location.locationName}                                
                  </option>
              )}
          </Input>
          }          
        </Col>
      </FormGroup>       
    )
  }
}

function mapStateToProps(state) {
  debugger;
  const { locations } = state;
  return {
    locations
  };
}

export default connect(mapStateToProps)(HeaderSetup); 

我只需要手动触发它吗？如果是这样，最好的地方/方式是什么？任何帮助是极大的赞赏！

答案

由于您使用controlled components，他们应该始终反映状态。在你的onChange回调中，你应该只更新状态，所有输入都应该相应更新。

如果您提供一个显示此问题的最小工作示例，我可能能够提供更多详细信息。

下面是一个如何设置它的简单工作示例：

class App extends React.Component {
  state = {
    locations: []
  };
  componentDidMount() {
    setTimeout(() => { // simulate loading
      this.setState({
        loading: false,
        locations: [
          {
            id: 1,
            label: "Paris"
          },
          {
            id: 2,
            label: "Rome"
          }
        ]
      });
    }, 3000);
  }
  render() {
    return <MyForm locations={this.state.locations} initialLocation={2}/>;
  }
}

class MyForm extends React.Component {
  state = {
    initialLocation: null,
    location: ""
  };

  componentWillReceiveProps(nextProps) {
    this.setState({
      initialLocation: nextProps.initialLocation,
    })
  }
  
  onChange = e => {
    this.setState({
      location: e.target.value
    });
  };

  render() {
    const { locations } = this.props;
    return (
      <label>
        <div>Select a location:</div>
        {locations.length > 0 && (
          <select value={this.state.location || this.state.initialLocation} onChange={this.onChange}>
            {locations.map(({ id, label }) => (
              <option key={id} value={id}>
                {label}
              </option>
            ))}
          </select>
        )}
      </label>
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

以上是关于React + Redux - 在初始加载时触发选择onChange（）的主要内容，如果未能解决你的问题，请参考以下文章

（通用 React + redux + react-router）如何避免在初始浏览器加载时重新获取路由数据？

在 React / Redux 中了解 UI 何时准备就绪

React + Redux：为啥在第三次加载时填充道具？

React Router 和 Redux - 初始加载数据

React + Redux：reducer 不会重新加载组件

React 组件没有得到 reducer 设置的 redux 初始状态