React.js 数组 .push() 正在接受多个值

Question

I am working on a simple blog website as my first Web Dev project. In the page where I write a blog, I am using a simple svg icon with an onClick listener to add a paragraph to the blog. This works like Medium where when you click on the "+" icon, it adds a new paragraph for you to write. Here is the code of my onClick event listener function:

function addNewPara() {
        // let newContent = {
        //     date: blogContent.date,
        //     author: blogContent.author,
        //     title: blogContent.author,
        //     contentArray: blogContent.contentArray.push("")
        // };
        // setBlogContent(newContent);

        setBlogContent(prevValue => {
            prevValue.contentArray.push("")
            return {
                ...prevValue,
            }
        });
    }

This has two ways where I update the state value. The issue here is that when I click the plus icon and this method is triggered, it pushes two empty strings into the contentArray key.

If I uncomment and switch to the other method, I get the following error: TypeError: blogContent.contentArray.map is not a function

The TypeError occurs where I am using the array to render the relevant HTML elements. What could be the issues behind this?

Answer 1

这应该是你的可设置方法

setBlogContent({...blogContent, contentArray: [...blogContent.contentArray, "your new item"]})