Javascript 不加载表单输入字段。没有错误，只是没有呈现任何内容

我对这个很陌生，所以我认为这是一个我不知道的愚蠢的小问题

我有一个表单，它根据从后端获得的设置点数量呈现输入行。我已经输入了几个console.log，在进入input.jsx之前，它们都可以正常工作。输入中的My console.log（）从未被调用，而代码似乎。。忘记输入

主要代码：

import React from "react";
import Joi from "joi-browser";

import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/button";

import Form from "./common/form";
import axios from "axios";

class SetpointsModal extends Form {
  state = {
    data: {},
    errors: {},
  };

  schema = {};

  doSubmit = async () => {
    const { data } = await axios.put(
      `/api/${this.props.id}_setpoints`,
      this.state.data
    );
    console.log(data);
  };

  async componentDidMount() {
    const { data } = await axios.get(`/api/${this.props.id}_setpoints`);
    Object.keys(data).forEach((key) => {
      this.schema[key] = Joi.number().label(data[key].label);
    });
    this.setState({ data });
  }

  render() {
    const { title, show, handleClose } = this.props;
    return (
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{title} Setpoints</Modal.Title>
        </Modal.Header>
        <form onSubmit={this.handleSubmit}>
          <Modal.Body>
            {Object.keys(this.state.data).forEach((field) => {
              this.renderInput(field);
            })}
          </Modal.Body>
          <Modal.Footer>
            {this.renderBtn("Update")}
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </form>
      </Modal>
    );
  }
}

export default SetpointsModal;

从“React”导入React；
从“Joi浏览器”导入Joi；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
从“/common/Form”导入表单；
从“axios”导入axios；
类SetPointsModel扩展了表单{
状态={
数据：{}，
错误：{}，
};
模式={}；
doSubmit=async（）=>{
const{data}=wait axios.put(
`/api/${this.props.id}\u设定点`，
这个.state.data
);
控制台日志（数据）；
};
异步组件didmount（）{
const{data}=wait axios.get（`/api/${this.props.id}_设置点`）；
Object.key（数据）.forEach（（key）=>{
this.schema[key]=Joi.number（）.label（数据[key].label）；
});
this.setState（{data}）；
}
render（）{
const{title，show，handleClose}=this.props；
返回(
{title}设定点
{Object.keys（this.state.data）.forEach（（字段）=>{
此.renderInput（字段）；
})}
{this.renderBtn（“更新”）}
接近
);
}
}
导出默认设置点模板；

句柄提交+渲染输入：

 handleSubmit = (e) => {
    e.preventDefault();

    const errors = this.validate();
    console.log(errors);
    this.setState({ errors: errors || {} });
    if (errors) return;

    this.doSubmit();
  };

  renderInput(name) {
    const { errors } = this.state;
    const { label, data } = this.state.data[name];
    console.log(name);
    return (
      <Input
        name={name}
        label={label}
        value={data}
        error={errors[name]}
        onChange={this.handleChange}
      />
    );

handleSubmit=（e）=>{
e、 预防默认值（）；
const errors=this.validate（）；
console.log（错误）；
this.setState（{errors:errors{}）；
如果（错误）返回；
这是doSubmit（）；
};
renderInput（名称）{
const{errors}=this.state；
const{label，data}=this.state.data[name]；
console.log（名称）；
返回(
);

输入：

import React from "react";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input {...rest} id={name} name={name} className="form-control" />
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
};

export default Input;

从“React”导入React；
常量输入=（{name，label，error，…rest}）=>{
返回(
{label}
{error&&{error}
);
};
导出默认输入；

forEach

这里不会做您希望它做的事情；它会在每次迭代中“做”一些事情，但不会“返回”任何东西

使用

map

可能更符合您的期望（）；这将返回一个将渲染的组件数组

我建议您在

渲染中进行以下更改（您需要向函数的每个输入传递
键
）：

  {Object.keys(this.state.data).map((field, key) => (
    this.renderInput(field, key);
  ))}