React Custom Hook, Array 改为单入

Question

In my component, I need to set the value of an array from either the mockedList or from history. I created a custom hook for this requirement. In my custom hook I can see that the JSON data is an array but when I check the console log in render it only shows the first data, thus map function doesn't work. I removed the setting of history just to debug but got the same problem. Please see my sample code below;

function Courses() {

    function useCourseData() {
        const history = useHistory();
        console.log(JSON.stringify(history));
        let courses = mockedCoursesList;
        /* Disabled for now 
        if (history.location.state && history.location.state.data) {
            console.log('getting from history');
            const courseList = [...mockedCoursesList];
            courses = courseList.push(history.location.state.data.course);
        }
        */
        //This logs the whole array
        console.log(JSON.stringify(courses));  
        return [courses];
    }

    const [filteredCourses, setFilteredCourses] = useCourseData();

    return (
        <div className='courses'>
            {/* The code below only log the first entry in the array instead of the whole array */}
            {console.log('Filtered: ' + JSON.stringify(filteredCourses))}
        

            {/* This throws an error since instead of array, filtereCourses is reduced to only one filteredCourse object */}
            {filteredCourses.map((course) => (
                <CourseCard
                    key={course.id}
                    course={course}
                    authors={authorNames(course.authors)}
                />
            ))}
        </div>
    );
}

export default Courses;

Answer 1

this line is creating problem.

courses = courseList.push(history.location.state.data.course);

/* array.push returns new length of an array, 
here you just push into cloned array and set this new array */