object在输入中输入值时的对象

Question

输入任何值时出现错误

一开始我使用类组件，但后来我开始为功能组件重做它们，一切都坏了。

在我的状态下，我得到这样一个值：title>标题："；[object object]和我输入的最后一个符号。

这是代码

减速器

export const postsReducer = (state = initialState, action) => {
switch (action.type) {
case CREATE_POST:
return {...state, posts: state.posts.concat(action.payload)}
default:return state
}
}

行动

export function createPost(post){
return{
type: CREATE_POST,
payload:post
}
}

以及类组件中的函数

this.setState(prev => ({
...prev, ...{
[event.target.name]: event.target.value
}
}))

所以我把它变成了一个功能性的。在setTitle中，我存储值const[title，setTitle]=useState(''(；

setTitle(prev => ({
...prev, ...{
[event.target.name]:event.target.value
}
}))

Answer 1

这取决于您在输入中引用值的方式。考虑到您当前的setTitle操作，如果您引用title，如：

<input type="text" name="title" onInput={handleInput} value={title} />

问题是使用setTitle操作将title变成对象。具有属性"的对象；标题"；例如CCD_ 5。然后将其字符串化为[object Object]。

您可以将setTitle更改为以下内容，使其保持为一个扁平字符串：

setTitle(e.target.value)

或者，您可以将状态的结构更改为表单属性的对象：//创建一个具有属性的对象以保存表单值const[form，setForm]=useState(｛title："｝(；

function handleInput(e) {
setForm(prev => ({
...prev,
[e.target.name]: e.target.value,
}));
}
// reference specific property on form state object
<input type="text" onInput={handleInput} value={form.title} />

希望这能有所帮助！