警告：收到 `value` 属性的 NaN。如果这是预期的，请将值转换为字符串。多部分形式的输入

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 创建空字符串。