react + asp.net core (.net 6) 创建新控制器

Question

当我创建和使用新控制器时，貌似无法接近控制器

这是源代码，我创建了 'BooksController'。控制台错误是 'Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0'

export class BooksIndex extends Component {
    constructor(props) {
        super(props);

        this.state = {
            books: [],
            loading: true
        }
    }

    // page initialized
    componentDidMount() {
        this.populateBooksData();
    }

    static renderBooksTable(books) {
        return (
            <table className='table table-striped' aria-labelledby="tabelLabel">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
                    {books.map(book =>
                        <tr key={book.id}>
                            <td>{book.id}</td>
                            <td>{book.title}</td>
                            <td>{book.description}</td>
                            <td>{book.created}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {

        let content = this.state.loading
            ? <p><em>Loading...</em></p>
            : BooksIndex.renderBooksTable(this.state.books);

        return (
            <div>
                <h1>My Books</h1>
                <h2>This is my book</h2>
                {content}
            </div>
        );
    }

    async populateBooksData() {
        const response = await fetch("books");
        const data = await response.json();
        this.setState({ books: data, loading: false });
    }
}

cf) 这是项目执行时的截图。 Webcaster是否是创建项目时默认创建的controller

enter image description here

Answer 1

如果您通过 dotnet new react 使用了 React spa 模板，那可能是因为 ClientApp/src 中的 setupProxy.js 中的上下文默认情况下如下所示：

const context =  [
  "/weatherforecast",
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

您可以将 /books 添加到该上下文数组，或者像我建议的那样，将其更改为 /api 然后在您的控制器上使用此属性（或创建一个基本控制器，其他继承自）：[Route("api/[controller]")]

react + asp.net core (.net 6) 创建新控制器

react + asp.net core (.net 6) create new controller

reactjs

asp.net-core

.net-6.0