提问者:小点点

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


我在文件“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”设置为未定义。我怀疑我没有从导出的函数“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>
    );
  }

共1个答案

匿名用户

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

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

你做的方式只是改变状态。这被认为是反模式。请参阅此处有关它的更多详细信息。

查看这个关于Js中不变性的问题