Javascript 如何从数据库中检索数据并将其显示在“选择”下拉列表中_Javascript_Reactjs

Javascript 如何从数据库中检索数据并将其显示在“选择”下拉列表中

javascript reactjs

Javascript 如何从数据库中检索数据并将其显示在“选择”下拉列表中,javascript,reactjs,Javascript,Reactjs,我需要在“选择查询的响应”菜单中显示mostraReferti，以便从下拉菜单中显示项目列表这是我从查询中得到的响应：答复： [ { hash_referto: "e9cceea77b26d2090649a923116a35882088d23378b0ad10ff48d139ae3db1da", proprietario: "050708", public_key: "0x7343197ba6ee64b5f07322ce1acb0f8f29897689",

我需要在“选择查询的响应”菜单中显示mostraReferti，以便从下拉菜单中显示项目列表

这是我从查询中得到的响应：

答复：

[
  {
    hash_referto: "e9cceea77b26d2090649a923116a35882088d23378b0ad10ff48d139ae3db1da",
    proprietario: "050708",
    public_key: "0x7343197ba6ee64b5f07322ce1acb0f8f29897689",
    data_esame: "2019-08-23T00:00:00.000Z",
    tipo_esame: "urologia",
    uri: null
  },
  {
    hash_referto: "5bad691600ade15abc5949ba8b089e0699071b72e503364fd0e05438a4b4581d",
    proprietario: "230888",
    public_key: "0x9628ade5057141a66018b63b78cbdc4a44f055b2",
    data_esame: "2019-09-01T00:00:00.000Z",
    tipo_esame: "pediatra",
    uri: null
  },
  {
    hash_referto: "codiceReferto",
    proprietario: "230888",
    public_key: "0x9628ade5057141a66018b63b78cbdc4a44f055b2",
    data_esame: "2019-10-02T00:00:00.000Z",
    tipo_esame: "dentista",
    uri: null
  }
];

最好只显示“数据esame”和“tipo esame”

代码如下：

class CredentialsPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allowToProceed: false,
      email: "",
      receiverCode: "",
      initialDate: "",
      expireDate: "",
      rights: "",
      codiceReferto: null,
      nextBtnDisabled: true,
      careGiver: "",
      value: "",
      id: "",
      referti: {}
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  componentDidMount() {
    const { actions } = this.props;

    requestAccountAccess(defaultAccount => {
      actions.account.setDefaultAccount(defaultAccount);
      actions.contract.setContract(defaultAccount);
    });

    mostraReferti(this.state.id);
  }

  static getDerivedStateFromProps(nextProps) {
    const { account } = nextProps;
    return { id: account.id };
  }

  onEnter = evt => {
    if (evt.key === "Enter") {
      const { allowToProceed } = this.state;
      if (allowToProceed) {
        this.proceed();
      }
    }
  };

  proceed = () => {
    const { actions, history } = this.props;
    const { codiceReferto, id } = this.state;

    actions.account.setCodiceReferto(codiceReferto);
    history.push("/consenso?panel=2");
  };

  enableNext = input => {
    const {} = this.props;
    if (input.valid) {
      this.setState({
        allowToProceed: true,
        email: input.value,
        nextBtnDisabled: false
      });
    }
  };

  render() {
    const { id, nextBtnDisabled } = this.state;

    return (
      <div className={styles}>
        <h2>Compila i campi per assegnare un consenso</h2>
        <Form onSubmit={this.handleSubmit}>
          <div className="form-section">
            <div className="custom-select">
              <Label for="type" text="Codice Referto" />
              <select
                name="codiceReferto"
                placeholder="Selezionare Referto"
                onKeyPress={this.onEnter}
                value={this.codiceReferto}
                onChange={this.handleInputChange}
              >
                <option default value="vuoto"></option>
                <option value="ciao">Display items</option>
              </select>
            </div>

            <br />
            <br />

            <br />

            <Label text="Il tuo Account ID (da MetaMask)" />
            <Input type="text" readOnly value={id} />
          </div>
        </Form>

        <Controls
          prevDisabled
          nextDisabled={nextBtnDisabled}
          handleNext={this.proceed}
        />
      </div>
    );
  }
}

function mostraReferti(id) {
  console.log("id", id);
  axios.get("http://localhost:8080/api/REFERTOs/" + id).then(response => {
    console.log("response " + JSON.stringify(response.data));
    return response.data;
  });
}

function mapStateToProps(state) {
  return {
    account: state.account,
    asset: state.asset
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      account: bindActionCreators(accountActionCreators, dispatch),
      contract: bindActionCreators(contractActionCreators, dispatch)
    }
  };
}

CredentialsPanel.propTypes = {
  account: PropTypes.shape({
    email: PropTypes.string,
    receiverCode: PropTypes.string,
    initialDate: PropTypes.date,
    expireDate: PropTypes.date,
    rights: PropTypes.string,
    codiceReferto: PropTypes.string,
    id: PropTypes.string
  }).isRequired,
  actions: PropTypes.shape({}).isRequired,
  asset: PropTypes.shape({}),
  history: PropTypes.shape({}).isRequired
};

CredentialsPanel.defaultProps = {
  asset: null
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CredentialsPanel))

class CredentialsPanel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
allowToProceed:false，
电邮：“，
接管人代码：“，
起始日期：“，
过期日期：“，
权利：“，
codicerefereto:null，
nextBtnDisabled:true，
护理者：“，
值：“”，
id:“”，
参考：{}
};
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（事件）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
componentDidMount（）{
const{actions}=this.props；
requestAccountAccess（defaultAccount=>{
actions.account.setDefaultAccount（defaultAccount）；
actions.contract.setContract（defaultAccount）；
});
mostrarefereti（this.state.id）；
}
静态getDerivedStateFromProps（下一步）{
const{account}=nextProps；
返回{id:account.id}；
}
onEnter=evt=>{
如果（evt.key==“输入”）{
const{allowtoproced}=this.state；
如果（允许处理）{
这个。继续（）；
}
}
};
继续=（）=>{
const{actions，history}=this.props；
const{codicerefereto，id}=this.state；
actions.account.setcodicerefereto（codicerefereto）；
历史推送（“/consenso？panel=2”）；
};
enableNext=input=>{
const{}=this.props；
if（input.valid）{
这是我的国家({
allowToProceed:正确，
电子邮件：input.value，
nextbtn已禁用：false
});
}
};
render（）{
const{id，nextbtnpdisabled}=this.state；
返回(
根据合同的约定编制合同
显示项目






);
}
}
函数mostrarefereti（id）{
console.log（“id”，id）；
axios.get（“http://localhost:8080/api/REFERTOs/“+id）。然后（响应=>{
log（“response”+JSON.stringify（response.data））；
返回响应数据；
});
}
函数MapStateTops（状态）{
返回{
账户：state.account，
资产：国有资产
};
}
功能图DispatchToprops（调度）{
返回{
行动：{
帐户：bindActionCreators（accountActionCreators，dispatch），
合同：bindActionCreators（contractActionCreators，dispatch）
}
};
}
CredentialsPanel.propTypes={
帐户：PropTypes.shape({
电子邮件：PropTypes.string，
接收方代码：PropTypes.string，
initialDate:PropTypes.date，
过期日期：PropTypes.date，
权限：PropTypes.string，
codicerefereto:PropTypes.string，
id:PropTypes.string
}).要求，
操作：PropTypes.shape（{}）.isRequired，
资产：PropTypes.shape（{}），
历史记录：PropTypes.shape（{}）.isRequired
};
CredentialsPanel.defaultProps={
资产：空
};
使用路由器导出默认值（连接（mapStateToProps、mapDispatchToProps）（CredentialsPanel））

能否请您将

mostrarefereti

方法移到组件中，并在构造函数中添加以下内容

this.mostraReferti = this.mostraReferti.bind(this);

最终代码：

class CredentialsPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allowToProceed: false,
      email: "",
      receiverCode: "",
      initialDate: "",
      expireDate: "",
      rights: "",
      codiceReferto: null,
      nextBtnDisabled: true,
      careGiver: "",
      value: "",
      id: "",
      referti: {}
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.mostraReferti = this.mostraReferti.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  componentDidMount() {
    const { actions } = this.props;

    requestAccountAccess(defaultAccount => {
      actions.account.setDefaultAccount(defaultAccount);
      actions.contract.setContract(defaultAccount);
    });

    mostraReferti(this.state.id);
  }

  mostraReferti(id) {
      console.log("id", id);
      axios.get("http://localhost:8080/api/REFERTOs/" + id).then(response => {
        console.log("response " + JSON.stringify(response.data));
        return response.data;
      });
    }


  static getDerivedStateFromProps(nextProps) {
    const { account } = nextProps;
    return { id: account.id };
  }

  onEnter = evt => {
    if (evt.key === "Enter") {
      const { allowToProceed } = this.state;
      if (allowToProceed) {
        this.proceed();
      }
    }
  };

  proceed = () => {
    const { actions, history } = this.props;
    const { codiceReferto, id } = this.state;

    actions.account.setCodiceReferto(codiceReferto);
    history.push("/consenso?panel=2");
  };

  enableNext = input => {
    const {} = this.props;
    if (input.valid) {
      this.setState({
        allowToProceed: true,
        email: input.value,
        nextBtnDisabled: false
      });
    }
  };

  render() {
    const { id, nextBtnDisabled } = this.state;

    return (
      <div className={styles}>
        <h2>Compila i campi per assegnare un consenso</h2>
        <Form onSubmit={this.handleSubmit}>
          <div className="form-section">
            <div className="custom-select">
              <Label for="type" text="Codice Referto" />
              <select
                name="codiceReferto"
                placeholder="Selezionare Referto"
                onKeyPress={this.onEnter}
                value={this.codiceReferto}
                onChange={this.handleInputChange}
              >
                <option default value="vuoto"></option>
                <option value="ciao">Display items</option>
              </select>
            </div>

            <br />
            <br />

            <br />

            <Label text="Il tuo Account ID (da MetaMask)" />
            <Input type="text" readOnly value={id} />
          </div>
        </Form>

        <Controls
          prevDisabled
          nextDisabled={nextBtnDisabled}
          handleNext={this.proceed}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    account: state.account,
    asset: state.asset
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      account: bindActionCreators(accountActionCreators, dispatch),
      contract: bindActionCreators(contractActionCreators, dispatch)
    }
  };
}

CredentialsPanel.propTypes = {
  account: PropTypes.shape({
    email: PropTypes.string,
    receiverCode: PropTypes.string,
    initialDate: PropTypes.date,
    expireDate: PropTypes.date,
    rights: PropTypes.string,
    codiceReferto: PropTypes.string,
    id: PropTypes.string
  }).isRequired,
  actions: PropTypes.shape({}).isRequired,
  asset: PropTypes.shape({}),
  history: PropTypes.shape({}).isRequired
};

CredentialsPanel.defaultProps = {
  asset: null
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CredentialsPanel))

class CredentialsPanel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
allowToProceed:false，
电邮：“，
接管人代码：“，
起始日期：“，
过期日期：“，
权利：“，
codicerefereto:null，
nextBtnDisabled:true，
护理者：“，
值：“”，
id:“”，
参考：{}
};
this.handleInputChange=this.handleInputChange.bind（this）；
this.mostrarefereti=this.mostrarefereti.bind（this）；
}
handleInputChange（事件）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
componentDidMount（）{
const{actions}=this.props；
requestAccountAccess（defaultAccount=>{
actions.account.setDefaultAccount（defaultAccount）；
actions.contract.setContract（defaultAccount）；
});
mostrarefereti（this.state.id）；
}
莫斯特拉菲蒂（id）{
console.log（“id”，id）；
axios.get（“http://localhost:8080/api/REFERTOs/“+id）。然后（响应=>{
log（“response”+JSON.stringify（response.data））；
返回响应数据；
});
}
静态getDerivedStateFromProps（下一步）{
const{account}=nextProps；
返回{id:account.id}；
}
onEnter=evt=>{
如果（evt.key==“输入”）{
const{allowtoproced}=this.state；
如果（允许处理）{
这个。继续（）；
}
}
};
继续=（）=>{
const{actions，history}=this.props；
const{codicerefereto，id}=this.state；
actions.account.setcodicerefereto（codicerefereto）；
历史推送（“/consenso？panel=2”）；
};
enableNext=input=>{
const{}=this.props；
if（input.valid）{
这是我的国家({
allowToProceed:正确，
电子邮件：input.value，
nextbtn已禁用：false
});
}
};
render（）{
const{id，nextbtnpdisabled}=this.state；
返回(
根据合同的约定编制合同
显示项目






);
}
}
函数mapstatetops（stat