Question

我试图将一个 json 对象作为 prop 传递给子组件，然后使用 map() 解析它，但我收到错误“TypeError: x.map is not a function”。但是这个错误只发生在子组件中。

这是我用来获取数据的函数：

        self.l1 = tk.Frame(self, background="red")
        self.l2 = tk.Frame(self, background="orange")
        self.l3 = tk.Frame(self, background="green")
        self.l4 = tk.Frame(self, background="blue")
        self.l5 = tk.Frame(self, background="brown")
        self.l6 = tk.Frame(self, background="yellow")

        self.rowconfigure(0, weight = 1)
        self.rowconfigure(1, weight = 1)
        self.rowconfigure(2, weight = 1)
        self.columnconfigure(0, weight = 1)
        self.columnconfigure(1, weight = 1)

        self.l1.grid(row=0, column=0, sticky="nsew")
        self.l2.grid(row=1, column=0, sticky="nsew")
        self.l3.grid(row=2, column=0, sticky="nsew")
        self.l4.grid(row=0, column=1, sticky="nsew")
        self.l5.grid(row=1, column=1, sticky="nsew")
        self.l6.grid(row=2, column=1, sticky="nsew")

我使用 map() 来解析和控制台记录函数内的数据。一切正常。但后来我尝试在子组件中做同样的事情：

export function Texts(){
    const [allTexts, setAllTexts] = useState([])

    async function fetchTexts (){
        const response = await fetch(`http://127.0.0.1:8000/api-texts/texts/`)
        const jsonResponse = await response.json()
        setAllTexts(jsonResponse)
        jsonResponse.map((text) =>{
            console.log(text.title)
        })
    }

    useEffect(()=>{
        fetchTexts()
    },[])

    console.log(allTexts)

    return(
        <div>
            <TextsList allTexts="allTexts"/>
        </div>
    )
}

但是它不起作用。有谁知道为什么会这样？

更新 1：

我在条目中包含了整个组件。我还应该说，当我控制台日志“allTexts”时，我会在控制台中得到一个包含所有数据的数组。我不知道为什么它在子组件中不起作用。

更新 2：

我尝试使用 forEach()，但也没有用。

export function TextsList({allTexts}){
    return(
        <ul>
            {allTexts.map((text, index) => {
                return <li key={index}>{text.title}</li>
            })}

        </ul>
    )
}

我收到错误“TypeError: allTexts.forEach is not a function”。

更新 3：

我发现了问题。原来我用的是引号而不是大括号。应该是：

export function TextsList({allTexts}){
const result = [];
allTexts.forEach((text, index) => {
  result.push(<li key={index}>{text.title}</li>);
})
return(
    <ul>
        {result}
    </ul>
)

Answer 1

正如我从您的代码中看到的，我认为主要组件存在问题，因为您将 alltexts 作为字符串传递，请仅尝试以下方法：

return(
    <div>
        <TextsList allTexts={allTexts}/>
    </div>
)

Answer 2

你可以试试：

export function TextsList({allTexts}){
const result = [];
allTexts.forEach((text, index) => {
  result.push(<li key={index}>{text.title}</li>);
})
return(
    <ul>
        {result}
    </ul>
)

}

为什么我在 React 中收到“TypeError: x.map is not a function”？

2 个答案: