分配给表单的对象属性显示为对象对象而不是实际值

Question

我将一个名为“team”的对象传递给 React 中的这个函数。 “团队”对象有 4 个不同的属性。

id、playerName、typeId 和 locationName。

我正在像这样填充状态值：

const [idValue, setIdValue] = React.useState(false);
const [typeIdValue, setTypeIdValue] = React.useState(false);
const [nameValue, setNameValue] = React.useState(false);
const [locationValue, setLocationValue] = React.useState(false);

我的函数看起来像这样设置上面的状态值。

const showEdit = (team) => {
        console.log(team);
        setShowRosterForm(true);
        setIdValue(team.id);
        setTypeIdValue(team.typeId);
        setNameValue(team.playerName);
        setLocationValue(team.locationName);
    }

然后我以如下形式显示这些值：

const RosterForm = ({
                        idValue, typeIdValue, nameValue, locationValue
                    }) => ( ... display form fields )

但是当我用这些值填充表单时，我只看到 [object Object]。

但我不明白，因为当我将 'team' 对象写入控制台时，我可以看到所有单独的属性，如 id、typeId、playerName 和 locationName。

所以我不确定为什么它是一个对象。

有没有更好的方法来做到这一点？

谢谢！

Answer 1

您不需要将状态 getter 传递给您的 RosterForm()。能不能不直接用getterstypeIdValue之类的设置表格？

请在您的 RosterForm() 中打印一个 console.log(typeIdValue) 以便您可以看到它收到的值。

我认为表单值的设置可能不正确。您可以更新代码以将值设置为表单的字段吗？

分配给表单的对象属性显示为对象对象而不是实际值

Object properties being assigned to a form show up as object Object instead of the actual value

reactjs

formik

react-hooks