反應不加載表單輸入字段。 沒有錯誤，只是沒有渲染

Question

我對此很陌生，所以我假設這是一個我不知道的愚蠢的小問題。

我有一個表單，它根據從后端獲得的設定點數量來呈現輸入線。 我已經輸入了幾個console.log，它們都是function，直到我到達input.jsx。 我在輸入中的 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;

處理提交+渲染輸入：

 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}
      />
    );

輸入：

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;

Answer 1

forEach這里不會做你想做的事； 它會在每次迭代中“做”一些事情，但不會“返回”任何東西。

使用map可能更符合您的期望（ 此處的文檔）； 這將返回一個將渲染出來的組件數組。

我建議在您的render中進行以下更改（您需要將一個key向下傳遞給您的函數中的每個輸入）：

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