class 組件 function 未找到

Question

我有一個問題，這是一個 class 組件：

import React from 'react';  
import ListToDo from './ListToDo';


export default class TestClass extends React.Component{
    state ={
        tasks:[]
    }


    async componentDidMount(){
        const response = await fetch('https://nztodo.herokuapp.com/api/task/?format=json');
        const tasks = await response.json
        this.setState({
            tasks
        });
    }
    render(){
        return(
            <ul className="list-group">
             {
                this.state.tasks.map(function(singleTask){
                    return <ListToDo task={singleTask} key={singleTask.id} />
                })
            }
            </ul>
        );
    }

錯誤是： TypeError: this.state.tasks.map is not a function } 為什么？ 我需要安裝一些嗎？

Answer 1

response.json是 function。 您將其分配給tasks state。 因此，當您嘗試使用Array.prototype.map()時， tasks不是數組。

調用它而不是將其分配給任務：

    async componentDidMount(){
        const response = await fetch('https://nztodo.herokuapp.com/api/task/?format=json');
        const tasks = await response.json() // Call json function here
        this.setState({
            tasks
        });
    }

Answer 2

response.json 是 function，因此您不能 map 超過 ZC1C425268E68385D1AB5074F14C1 只需將此行更改為

const tasks = await response.json();