node.js - 警告 : Received NaN for the `value` attribute. 如果这是预期的，请将该值转换为字符串。多部分形式的输入

Question

我在 React 中创建了一个多部分表单，我认为我的文本和文件字段将数据正确传递到我的控制台，但是 int 值似乎会引发错误。我知道我应该使用 parseInt 将它们解析为数值，但我不确定我这样做是否正确。

有一个填充下拉菜单，其中传递了 Redux 数据，它可以正确显示，但是无论我以何种方式设置状态，似乎都会在我的控制台中抛出 NaN 错误**。我知道 e.target.value 总是会转换为字符串，所以我该如何将其解析为 INT？**

// state for the current field value
    const [spot, setSpot] = useState({
        diveLocation: ``,
        diveRegionID: parseInt(``),
        diveTypeID: parseInt(``),
        diveSpotDescription: ``,
        diveSpotPhotos: ``,
        error: ``
    });

.....
const handleChange = (property) => (e) => {
        setSpot({
            // override the changed property and keep the rest
            ...spot,
            [property]: e.target.value,
        });
    }

    const handleChangeInt = (property) => (e) => {
        setSpot({
            // override the changed property and keep the rest
            ...spot,
            [property]: e.target.valueAsNumber,
        });
    }

<FormControl className={classes.formControl}>
                        <PopulateDropdown
                            dataList={diveTypeList}
                            titleProperty={"diveType"} // option label property
                            valueProperty={"diveTypeID"} // option value property
                            name="diveType"
                            placeholder="Dive Type"
                            label="Select Dive Type"
                            value={spot.diveTypeID}
                            onChange={handleChange("diveTypeID")}/>
                    </FormControl>

错误信息

更新

我已经添加了一个单独的“handleChangeInt”来将 e.targetValue 转换为数字，但是现在我的下拉字段不会让我选择一个字段，并且每当我选择一个选项时都会变成空白。

<PopulateDropdown
    dataList={diveTypeList}
    titleProperty={"diveType"} // option label property
    valueProperty={"diveTypeID"} // option value property
    name="diveType"
    placeholder="Dive Type"
    label="Select Dive Type"
    value={spot.diveTypeID}
    **onChange={handleChangeInt("diveTypeID")}/>**

现在我已经输入了一个额外的 handleChange 来解析我的 INT，所以当我点击一个选择选项时，下面的前两个字段将不会保存值。

Answer 1

您需要使用空字符串 "" 或与提供给选择组件的选项之一匹配的值来初始化您的状态。

所以，用空字符串初始化:

const [spot, setSpot] = useState({
  diveLocation: "",
  diveRegionID: "", // here
  diveTypeID: "", // and, here
  diveSpotDescription: "",
  diveSpotPhotos: "",
  error: ""
});

您还可以使用两个 back ticks创建空字符串。