передача возвращенных данных из экспортируемой функции в компонент React

Question

У меня есть функция, определенная в файле 'utils.js', например:

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

У меня также есть мой компонент реагирования, определенный следующим образом в файле 'myComponent.js':

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()})
}

То, как вы делаете, вы просто изменяете состояние.Это считается анти паттерном.См. здесь Подробнее об этом.

См. Этот вопрос о неизменности в Js