javascript - React - 尽管有默认值，但复选框值未定义

Question

我遇到了一个问题，如果输入框未受影响，会导致第一个复选框之后选中的所有复选框上的 size 和 maxArrayElements 未定义。如果没有触及，它们都默认设置为 1。

因此，在沙箱中，选择一个数据模式、selectorField，选中一个框，只需选择 lengthType，然后点击提交。该对象将返回(在控制台中)，size 和 arrayElements 的默认值为 1。

现在，如果我选中另一个框，只需选择 lengthType，然后点击提交，如果没有触及，size 和 arrayElements 值将返回未定义。它们应该默认为 1。我确实将 placeholder 值设置为 1，因此它可能会产生误导。具体来说，输入上的 value 属性 value={this.state.size[lastCheckedFieldName] || 1} 如果未更改，请通过将默认值设置为 1 来处理此问题。但由于某种原因这并没有发生

这个sandbox正在重现该问题。

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox, CheckboxGroup } from "react-checkbox-group";
import axios from "axios";

import "./styles.css";

const schemas = [{ name: "Phone Data", id: "1" }];

const data = {
  data: {
    id: "2147483601",
    name: "Phone Data",
    fields: [
      {
        name: "Callee #"
      },
      {
        name: "Caller #"
      },
      {
        name: "Duration"
      }
    ]
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      schemas: [],
      fields: [],
      size: {},
      lengthType: {},
      maxArrayElements: {},
      fieldNames: [],
      submitDisabled: true
    };

    this.onDataSchemaChange = this.onDataSchemaChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  componentDidMount() {
    axios({
      method: "get",
      url: `/list/of/schemas`
    })
      .then(response => {
        console.log(response);
        this.setState({ schemas: schemas });
      })
      .catch(error => console.log(error.response));
  }

  onDataSchemaChange = event => {
    const schema = this.state.schemas.find(
      schema => schema.name === event.target.value
    );
    if (schema) {
      axios({
        method: "get",
        url: ``
      })
        .then(response => {
          console.log(response);
          this.setState({
            fields: data.data.fields,
            selectedId: data.data.id
          });
          console.log(this.state.selectedId);
          console.log(this.state.fields);
        })
        .catch(error => console.log(error.response));
    }
  };

  onSizeChange = e => {
    e.persist();
    const { fieldNames } = this.state;
    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
    this.setState(
      prevState => {
        return {
          size: {
            ...prevState.size,
            [lastCheckedFieldName]: e.target.value
          }
        };
      },
      () => {
        console.log(this.state.size);
      }
    );
    console.log([e.target.name]);
  };

  onChangeMaxArrayElements = e => {
    e.persist();
    const { fieldNames } = this.state;
    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
    this.setState(
      prevState => {
        return {
          maxArrayElements: {
            ...prevState.maxArrayElements,
            [lastCheckedFieldName]: e.target.value
          }
        };
      },
      () => {
        console.log(this.state.maxArrayElements);
      }
    );
    console.log([e.target.name]);
  };

  handleSelectorFieldChange = event => {
    this.setState({ selectorField: event.target.value });
  };

  handleCancel = event => {
    event.target.reset();
  };

  fieldNamesChanged = newFieldNames => {
    this.setState({
      submitDisabled: !newFieldNames.length,
      fieldNames: newFieldNames,
      size: {
        [newFieldNames]: 1,
        ...this.state.size
      },
      maxArrayElements: {
        [newFieldNames]: 1,
        ...this.state.maxArrayElements
      }
    });
    console.log(this.state.size);
    console.log(this.state.maxArrayElements);
  };

  updateSelectorField = e => {
    this.setState({ selectorField: e.target.value });
  };

  updateLengthType = e => {
    e.persist();
    const { fieldNames } = this.state;
    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
    console.log("e", e);
    this.setState(prevState => {
      const lengthType = { ...prevState.lengthType };
      lengthType[lastCheckedFieldName] = e.target.value;
      return {
        lengthType
      };
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    const fields = this.state.fieldNames.map(fieldName => ({
      name: fieldName,
      lengthType: this.state.lengthType[fieldName],
      size: this.state.size[fieldName],
      maxArrayElements: this.state.maxArrayElements[fieldName]
    }));
    console.log(fields);
  };

  render() {
    const { schemas, fields, fieldNames, selectorField } = this.state;
    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <fieldset>
            <legend>
              <h2>QuerySchema Information</h2>
            </legend>
            <div className="info-boxes">
              <div>
                <label> Pick the dataschema to describe your data file:</label>{" "}
                <select
                  name="schemaName"
                  value={this.state.value}
                  onChange={this.onDataSchemaChange}
                >
                  <option value="">Choose Dataschema ...</option>
                  {schemas &&
                    schemas.length > 0 &&
                    schemas.map(schema => {
                      return <option value={schema.name}>{schema.name}</option>;
                    })}
                </select>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>
              <h2> DataSchema Fields </h2>
            </legend>
            <div className="selectorField-div">
              <div>
                <label>Selector Field:</label>{" "}
                <select
                  value={this.state.selectorField}
                  onChange={this.updateSelectorField}
                  required
                >
                  <option value="">Pick Selector Field...</option>
                  {fields &&
                    fields.map(field => {
                      return <option value={field.name}>{field.name}</option>;
                    })}
                </select>
              </div>
              {selectorField && (
                <fieldset>
                  <div>
                    <legend>Choose field names</legend>
                    <CheckboxGroup
                      checkboxDepth={5}
                      name="fieldNames"
                      value={this.state.fieldNames}
                      onChange={this.fieldNamesChanged}
                      required
                    >
                      {fields &&
                        fields.map(field => {
                          return (
                            <li>
                              <Checkbox value={field.name} />
                              {field.name}
                            </li>
                          );
                        })}
                    </CheckboxGroup>
                  </div>{" "}
                </fieldset>
              )}
            </div>
            <div className="input-boxes">
              {lastCheckedFieldName && (
                <div>
                  <label>Length Type:</label>
                  <select
                    value={this.state.lengthType[lastCheckedFieldName] || ""}
                    onChange={this.updateLengthType}
                    required
                  >
                    <option value="">Select Length Type...</option>
                    <option value="fixed">Fixed</option>
                    <option value="variable">Variable</option>
                  </select>
                </div>
              )}
              {lastCheckedFieldName && (
                <div>
                  <label>Size:</label>
                  <input
                    value={this.state.size[lastCheckedFieldName] || 1}
                    onChange={this.onSizeChange}
                    type="number"
                    name="size"
                    min="1"
                    placeholder="1"
                    required
                  />
                </div>
              )}
              {lastCheckedFieldName && (
                <div>
                  <label>MaxArray Elements:</label>
                  <input
                    value={
                      this.state.maxArrayElements[lastCheckedFieldName] || 1
                    }
                    onChange={this.onChangeMaxArrayElements}
                    type="number"
                    name="maxArrayElements"
                    placeholder="1"
                    min="1"
                    max="100"
                    required
                  />
                </div>
              )}
            </div>
          </fieldset>

          <div className="btn-group">
            <span className="input-group-btn">
              <button
                className="btnSubmit"
                handleSubmit={this.handleSubmit}
                type="submit"
                disabled={this.state.submitDisabled}
              >
                Submit{" "}
              </button>
              <button
                className="btnReset"
                handleCancel={this.handleCancel}
                type="reset"
                onClick={() => {
                  alert("Clearing current field values.");
                }}
              >
                Reset
              </button>
            </span>
          </div>
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我已经检查了 handleSubmit 函数末尾的 state 的输出，它看起来像这样:

lengthType: {
  "Callee #": "fixed",
  "Caller #": "variable"
},
maxArrayElements: {
  "Callee #,Caller #": 1,
  "Callee #": 1
}
fieldNames: [
 0: "Callee #"
 1: "Caller #"
]

这里的问题是，lengthType 和 maxArrayElements 中的键命名不正确。您正在设置 CheckboxGroup 的这些键值对 onChange。问题的根源在于传递给 fieldNamesChanged 函数的参数。 CheckboxGroup 始终传递已选中复选框的 Array，而不仅仅是新复选框。我建议仅从 newFieldNames 获取最后一条记录并将其添加到状态。

fieldNamesChanged = newFieldNames => {
    this.setState({
      submitDisabled: !newFieldNames.length,
      fieldNames: newFieldNames,
      size: {
        [newFieldNames[newFieldNames.length - 1]]: 1,
        ...this.state.size
      },
      maxArrayElements: {
        [newFieldNames[newFieldNames.length - 1]]: 1,
        ...this.state.maxArrayElements
      }
    });
  };