Javascript 将导出函数返回的数据传递给React组件
我在文件“utils.js”中定义了如下函数:Javascript 将导出函数返回的数据传递给React组件,javascript,reactjs,react-native,react-redux,Javascript,Reactjs,React Native,React Redux,我在文件“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);
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”设置为未定义。我怀疑我没有从导出的函数“get_data”中正确获取返回值。有没有办法解决这个问题
更新日期:2019年3月4日,根据评论中的请求添加渲染方法:
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>
);
}
要更新类组件中的状态,应使用方法 你这样做只是改变了状态。这被认为是反模式的。请查看有关它的更多详细信息
看到这个关于的问题,非常感谢您的快速回复!它仍然不会更改“返回的_数据”。我认为这与“get_data”是从另一个文件外部导入的函数有关。这是我根据您的建议添加的实际行:This.setState{returned_data:utils.get_data};你能发布你的呈现方法吗?状态显示为未定义?当我发布时,它在handleSubmit方法中显示为未定义:console.logreturned\u数据:%O,this.state.returned\u数据;我刚刚在原始帖子中添加了render方法
handleSubmit(event) {
event.preventDefault();
event.stopPropagation();
this.setState({returned_data : myData()})
}