Javascript 反应-复选框值未定义，尽管有默认值

我有一个小问题，它导致在第一个复选框之后选中的所有复选框上的

size

和

maxarayelements

未定义（如果未触及输入框）。如果未触摸它们，它们都将默认设置为

1

因此，在沙盒中，选择一个数据模式，selectorField，选中一个框，只需选择lengthType，然后点击submit。对象将返回（在控制台中）并带有

size

和

arrayElements

的默认值1

现在，如果我选中另一个框，只需选择lengthType，然后点击submit，

size

和

arrayElements

值如果不被触摸，则返回未定义的值。它们应该默认为1。我确实有一个

占位符

值设置为1，因此可能会产生误导。具体来说，输入上的

值

属性

值={this.state.size[lastCheckedFieldName]| | 1}

通过将默认值设置为1（如果未更改）来处理此问题。但出于某种原因，这并没有发生

这是重复问题

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

从“React”导入React；
从“react dom”导入react dom；
从“反应复选框组”导入{Checkbox，CheckboxGroup}；
从“axios”导入axios；
导入“/styles.css”；
常量模式=[{name:“电话数据”，id:“1”}]；
常数数据={
数据：{
id:“2147483601”，
姓名：“电话数据”，
字段：[
{
姓名：“被叫人#”
},
{
姓名：“来电者#”
},
{
名称：“持续时间”
}
]
}
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
模式：[]，
字段：[]，
大小：{}，
长度类型：{}，
maxArrayElements:{}，
字段名：[]，
提交：对
};
this.onDataSchemaChange=this.onDataSchemaChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleCancel=this.handleCancel.bind（this）；
}
componentDidMount（）{
axios({
方法：“获取”，
url:`/list/of/schemas`
})
。然后（响应=>{
控制台日志（响应）；
this.setState（{schemas:schemas}）；
})
.catch（error=>console.log（error.response））；
}
onDataSchemaChange=事件=>{
const schema=this.state.schemas.find(
schema=>schema.name==event.target.value
);
if（模式）{
axios({
方法：“获取”，
网址：``
})
。然后（响应=>{
控制台日志（响应）；
这是我的国家({
字段：data.data.fields，
选择edid:data.data.id
});
console.log（this.state.selectedId）；
console.log（this.state.fields）；
})
.catch（error=>console.log（error.response））；
}
};
onSizeChange=e=>{
e、 坚持（）；
const{fieldNames}=this.state；
const lastCheckedFieldName=fieldNames[fieldNames.length-1]；
这是我的国家(
prevState=>{
返回{
尺寸：{
…prevState.size，
[lastCheckedFieldName]：e.target.value
}
};
},
() => {
console.log（this.state.size）；
}
);
log（[e.target.name]）；
};
onChangeMaxArrayElements=e=>{
e、 坚持（）；
const{fieldNames}=this.state；
const lastCheckedFieldName=fieldNames[fieldNames.length-1]；
这是我的国家(
prevState=>{
返回{
maxArrayElements：{
…prevState.maxArrayElements，
[lastCheckedFieldName]：e.target.value
}
};
},
() => {
console.log（this.state.maxarayelements）；
}
);
log（[e.target.name]）；
};
handleSelectorFieldChange=事件=>{
this.setState（{selectorField:event.target.value}）；
};
handleCancel=事件=>{
event.target.reset（）；
};
fieldNamesChanged=newFieldNames=>{
这是我的国家({
submitDisabled:！newFieldNames.length，
字段名：新字段名，
尺寸：{
[newFieldNames]：1，
…这个州的尺寸
},
maxArrayElements：{
[newFieldNames]：1，
…this.state.maxarayelements
}
});
console.log（this.state.size）；
console.log（this.state.maxarayelements）；
};
updateSelectorField=e=>{
this.setState（{selectorField:e.target.value}）；
};
UpdateLengtype=e=>{
e、 坚持（）；
const{fieldNames}=this.state；
const lastCheckedFieldName=fieldNames[fieldNames.length-1]；
控制台日志（“e”，e）；
this.setState（prevState=>{
const lengthType={…prevState.lengthType}；
lengthType[lastCheckedFieldName]=e.target.value；
返回{
长型
};
});
};
handleSubmit=事件=>{
event.preventDefault（）；
const fields=this.state.fieldNames.map（fieldName=>({
名称：fieldName，
lengthType:this.state.lengthType[fieldName]，
大小：this.state.size[fieldName]，
maxArrayElements:this.state.maxArrayElements[fieldName]
}));
console.log（字段）；
};
render（）{
const{schemas，fields，fieldNames，selectorField}=this.state；
const lastCheckedFieldName=fieldNames[fieldNames.length-1]；
返回(
查询模式信息
选择数据模式来描述您的数据文件：{“”}
选择数据模式。。。
{模式&&
schemas.length>0&&
schemas.map（schema=>{
返回{schema.name}；
})}
数据模式字段
选择器字段：{'}
选择选择器字段。。。
lengthType: {
  "Callee #": "fixed",
  "Caller #": "variable"
},
maxArrayElements: {
  "Callee #,Caller #": 1,
  "Callee #": 1
}
fieldNames: [
 0: "Callee #"
 1: "Caller #"
]

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