Question

我在文件'utils.js'中定义了一个函数，如下所示：

export function get_data() {
    return "some_data";
}

我在文件'myComponent.js'中也定义了我的react组件：

import * as utils from './utils.js';

class clab_redux_form extends Component {

  constructor(...args) {
    super(...args);

    this.state = { returned_data : "" };

  }

  handleSubmit(event) {
    event.preventDefault();
    event.stopPropagation();
    this.state.returned_data = utils.get_data();
  }
..
...
.....
......
}

但是，'this.state.returned_data'设置为undefined。我怀疑我没有从导出的函数'get_data（）'中正确获取返回值。有任何解决方法的想法吗？

更新04/03/2019（根据注释中的每个请求添加渲染方法）：

  render() {
    const { field_style, invalid_style, owner_userid, owner_email, description, start_datetime, end_datetime, resources, api_res, resource_labels } = this.state;

    return (
      <Form style={{ marginTop : '2px', marginLeft : '50px', backgroundColor : 'WhiteSmoke'} }
        noValidate
        validated={validated}
        onSubmit={e => this.handleSubmit(e)}
      >

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Owner Userid</Form.Label>
              <Form.Control
                  required
                  type="text"
                  placeholder="Owner Userid"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'owner_userid')}
                  defaultValue={this.state.owner_userid}/>
          </Form.Group>

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Email</Form.Label>
              <Form.Control
                  required
                  type="email"
                  placeholder="Email"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'owner_email')}
                  defaultValue={this.state.owner_email}/>
          </Form.Group>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Description</Form.Label>
              <Form.Control
                  required
                  type="text"
                  placeholder="Description"
                  onChange={e => this.handleChange(e,'description')}
                  style={this.state.field_style}/>
          </Form.Group>

          <Form.Row>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Start Date/Time</Form.Label>
              <Form.Control
                  required
                  type="datetime-local"
                  placeholder="Start Date/Time"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'start_datetime')}
                  defaultValue={this.state.start_datetime}/>
          </Form.Group>

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>End Date/Time</Form.Label>
              <Form.Control
                  required
                  type="datetime-local"
                  placeholder="End Date/Time"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'end_datetime')}
                  defaultValue={this.state.end_datetime}/>
          </Form.Group>
          </Form.Row>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Select Resource(s) </Form.Label>
              <Typeahead
                  id="typeahead"
                  clearButton
                  //defaultSelected={options.slice(0, 9)}
                  labelKey="label"
                  multiple
                  options={options}
                  style = {{ backgroundColor : 'white', width : '380px' , marginLeft : '5px' , height : '280px'}}
                  onChange={selectedData => this.handleChange(selectedData,'resources')}
                  placeholder="Choose resource(s) ..."
              />

          </Form.Group>

          <Button type='submit' style = {{ color : 'white', borderColor : 'white', borderRadius: '10px', fontSize: '15px', padding: '5px 12px', backgroundColor : 'SteelBlue', marginLeft : '25px' , marginTop : '15px', fontSize : '15px', border: '2px solid white' }}>Submit</Button>

          <Button style = {{ color : 'white', borderColor : 'white', borderRadius: '10px', fontSize: '15px', padding: '5px 12px', backgroundColor : 'Tomato', marginLeft : '10px' , marginTop : '15px', fontSize : '15px', border: '2px solid white' }}>Cancel</Button>

      </Form>
    );
  }

Answer 1

要更新类组件中的状态，您应该使用setState()方法

handleSubmit(event) {
    event.preventDefault();
    event.stopPropagation();
    this.setState({returned_data : myData()})
}

您所做的只是改变状态。这被认为是反模式。请参阅here的更多详细信息。

查看有关immutability in Js的问题

将返回的数据从导出的函数传递到React组件

1 个答案: