我是一名新生,我想写一个由teamId获取团队成员信息的反应部分。
反应代码
import React from 'react';
import PropTypes from 'prop-types';
import UserTable from './pm_user_table';
import {Form,Modal,Input,Button} from 'antd';
const FormItem = Form.Item;
class PMBody extends React.Component{
constructor(props){
super(props);
this.state={
curTeam:this.props.curTeam,
memberList:[]
}
}
componentWillMount(){
console.log('component mount');
}
componentWillReceiveProps(nextProps){
if(nextProps.curTeam !== this.state.curTeam){
this.setState({curTeam:nextProps.curTeam});
}
}
render(){
let {getFieldProps} = this.props.form;
const teamId = this.state.curTeam;
var myFetchOptions={method: 'GET'};
fetch("http://localhost:3001/teamMembers/" +this.state.curTeam,myFetchOptions)
.then(response=>response.json())
.then(json => {
this.setState({memberList:json});
}
).catch(function(){
console.log("error");
});
let memberList = this.state.memberList;
const body = memberList !='' ?
<UserTable dataSource={memberList} actions={this.props.actions} />
:
''
;
return (
<div>
{body}
</div>
)
}
PMBody.PropTypes = {
curTeam:PropTypes.string.isRequired,
actions: PropTypes.object.isRequired
}
export default PMBody =Form.create({})(PMBody);
通过chrome devtool中的网络视图,浏览器似乎反复请求相同的URL。
那么为什么它会重复获取相同的网址?
答案 0 :(得分:2)
你误解了render()
method的目的。
当任何更改发生时,反应调用componentDidMount()
以更新您的组件。它必须是纯粹的,不应与其他任何东西互动。
您应将其移至mkdir( $path, "0777", true ); // BAD - only creates /a/b
mkdir( $path, 0777, true ); // GOOD - creates /a/b/c/d
。