javascript - React - 在发布请求中发送存储的状态值 - 格式错误的数据

Question

我有一组复选框，当选中每个复选框时，每个复选框都可以有自己的 lengthType 和 size 值，这些值存储在状态中。我还做了一个沙箱:https://codesandbox.io/s/j29yp2j905

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: ["action", "callee", "caller", "duration", "message"],
      fieldNames: [],
      size: {},
      lengthType: {},
      maxArrayElements: {}
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  fieldNamesChanged = newFieldNames => {
    console.log("newFiledNames", newFieldNames);
    this.setState({ fieldNames: newFieldNames });
  };

  onChange = 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([e.target.name]);
  };

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

  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([e.target.name]);
  };

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

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

    axios({
      method: "post",
      url: `/some/url`,
      headers: {
        Accept: " ",
        "Content-Type": "application/json"
      },
      data: JSON.stringify({
        name: this.state.qsName,
        selectorField: this.state.selectorField,
        fields: fields
      })
    })
      .then(response => {
        console.log(response);
        this.setState({ querySchemaId: response.data.data.id });
      })
      .catch(error => console.log(error.response));
  };

  render() {
    const { fields, fieldNames } = this.state;

    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];

    return (
      <div className="App">
        <h1>Checkbox Group</h1>

        <div>
          <form onSubmit={this.handleSubmit}>
            <fieldset>
              <legend>Choose field names</legend>
              <br />
              <CheckboxGroup
                checkboxDepth={5}
                name="fieldNames"
                value={this.state.fieldNames}
                onChange={this.fieldNamesChanged}
              >
                {fields &&
                  fields.map(field => {
                    return (
                      <label>
                        <Checkbox value={field} />
                        {field}
                      </label>
                    );
                  })}
                <br />
              </CheckboxGroup>
              <br />
              {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>
              )}
              <br />
              {lastCheckedFieldName && (
                <div>
                  <label>Size:</label>
                  <input
                    value={this.state.size[lastCheckedFieldName] || 1}
                    onChange={this.onChange}
                    type="number"
                    name="size"
                    placeholder="1"
                    min="0"
                    required
                  />
                </div>
              )}
              <br />

              {lastCheckedFieldName && (
                <div>
                  <label>MaxArray Elements:</label>
                  <input
                    value={
                      this.state.maxArrayElements[lastCheckedFieldName] || 1
                    }
                    onChange={this.onChangeMaxArrayElements}
                    type="number"
                    name="maxArrayElements"
                    placeholder="1"
                    min="0"
                    max="100"
                    required
                  />
                </div>
              )}
            </fieldset>

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

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

当我提交此表单数据时，发送的状态值发生了一些奇怪的情况。

由于更改了一些内容，我发送的数据已变得格式错误:

"data": 
    "{\"name\":\"QS7\",
    \"selectorField\":\"callee\",
    \"fields\":
        [{\"name\":\"action\",
        \"lengthType\":{\"action\":\"fixed\"},
        \"size\":{\"action\":\"3\"},
        \"maxArrayElements\":{\"action\":\"4\"}
        }]}"

应该是这样的

"data": 
    "{\"name\":\"QS7\",
    \"selectorField\":\"callee\",
    \"fields\":
        [{\"name\":\"action\",
        \"lengthType\":\"fixed\",
        \"size\":\"3\"},
        \"maxArrayElements\":\"4\"}
        }]}"

由于某种原因，field.name 作为数组中的第一个值添加到每个字段元素。

Answer 1

您可以将 lengthType、size 和 maxArrayElements 以类似 { fieldName: value } 的形式存储在您的 状态。因此，您可能忘记在 handleSubmit 方法中的映射回调中为当前 fieldName 选择它们中的每一个。所以 fields 基本上应该像这样映射:

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