Question

TypeError：render不是函数
updateContextConsumer
D：/Portfolio/react-project/context-hooks/node_modules/react-dom/cjs/react-dom.development.js：18304

我试图解决此问题，当运行代码时，它将显示TypeError：render不是一个函数。请帮帮我。
这是我的3个文件

App.js

import React from 'react';
import './App.css';
import BookList from './context/BookList';
import ThemeContext from './context/ThemeContext'


function App() {
  return (
    <div className="container">
       <div className="App">
        <ThemeContext>
          <BookList />
        </ThemeContext>
       </div>
    </div>
  );
}

export default App;

ThemeContext.js
当我使用{props.children}时，将显示错误

import React, { createContext, useState } from 'react';
export const BookContext = createContext();

const ThemeContext = (props) =>  {
 const books = useState([
  {title: 'book1', id: '1'},
  {title: 'book2', id: '2'},
  {title: 'book3', id: '3'},
 ])

 return (
   <BookContext.Provider value={{books}}>
    {props.children}
   </BookContext.Provider>
 )
}

export default ThemeContext;

BookList.js

import React, { useContext } from 'react';
import { BookContext } from './ThemeContext'

const BookList = () => {
 const { books } = useContext(BookContext);
 console.log(books)
 return (
  <BookContext.Consumer>
   <div className="book-list" >
    <ul className="book-list-area">
     {books.map((books, index) => {
      return <li className="book-list-item" key={index}>{books.title} </li>
     }
     )}
    </ul>
   </div>
  </BookContext.Consumer>
 )
}

export default BookList

Answer 1

该问题已在文档（https://reactjs.org/docs/context.html#contextconsumer）中进行了解释

需要一个功能作为孩子。该函数接收当前上下文值并返回一个React节点。传递给函数的value参数将等于树中以上上下文的最接近Provider的值prop。如果上面的上下文没有提供者，则value参数将等于传递给createContext（）的defaultValue。

BookContext.Cosumer必须

<BookContext.Consumer>
  {value => /* render something based on the context value */}
</BookContext.Consumer>

但是，您正在使用useContext来访问值，因此不需要BookContext.Cosumer。只需将其删除。

Answer 2

只是我没有声明正确的状态变量const books = useState([

ThemeContext.js

 const ThemeContext = (props) =>  {
 const books = useState([
  {title: 'book1', id: '1'},
  {title: 'book2', id: '2'},
  {title: 'book3', id: '3'},
 ]) <br />

代替

  const ThemeContext = (props) =>  {
  const [books, setBooks] =useState([
  {title: 'book1', id: '1'},
  {title: 'book2', id: '2'},
  {title: 'book3', id: '3'},
 ])

BookList.js
并且不需要<BookContext.Consumer>

<BookContext.Consumer>
   <div className="book-list" >
    <ul className="book-list-area">
     {books.map((books, index) => {
      return <li className="book-list-item" key={index}>{books.title} </li>
     }
     )}
    </ul>
   </div>
  </BookContext.Consumer>

代替

   <div className="book-list" >
    <ul className="book-list-area">
     {books.map((books, index) => {
      return <li className="book-list-item" key={index}>{books.title} </li>
     }
     )}
    </ul>
   </div>

TypeError：render不是函数... updateContextConsumer

2 个答案: