警告：收到“value”属性的 NaN如果这是预期的，请将值转换为字符串多部分表单输入

如何解决警告：收到“value”属性的 NaN如果这是预期的，请将值转换为字符串多部分表单输入

我在 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，当我点击一个选择选项时，下面的前两个字段不会包含值。

解决方法

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

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

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

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