javascript - 使用 Reactjs 获取 GET 请求 - 如何在请求中实现可重用组件来呈现数据？

Question

TLDR - 您不应在数据获取请求中实现/调用可重用组件。正确的方法是使用一个容器组件来负责获取数据，并将其存储在 state 中。 ，并将其传递给负责将数据呈现为 UI 的表示组件。 (下面的例子)

<小时/>

最初我想做的事情(我假设组件被转换为 HTML 并且可以创建为字符串 - 不好的做法):

fetch('http://localhost:8000/api/Books')
        .then(response => {
            if (!response.ok) {
                throw Error('Network request failed.')
            }
            return response;
        })
        .then(data => data.json())
        .then(data => {
            let output = ''
            for (let book of data) {
                output += (
                    <Book id={book._id}
                          title={book.title}
                          author={book.author}
                          genre={book.genre}
                          read={book.read} />
                    );
            }
            console.log('parsed json', data);
            document.getElementById('database').innerHTML = output;
        }, (ex) => {
            this.setState({
                requestError : true
            });
            console.log('parsing failed', ex)
        })

我的问题是:
我该如何进行这项工作？如何在 GET 请求中实现 Book 组件，为数据库中的每个对象呈现可重用的 Book？

我的解决方案
有<BooksContainer />因为我的容器组件书籍数据存储在状态中并使用 .map 进行迭代将每个书籍对象渲染为 <Book />组件 - 我们的展示功能。

    //BooksContainer.js - responsible for data fetching and storing
class BooksContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            books: [];
        };
    }
    componentDidMount () {
        fetch('http://localhost:8000/api/Books')
            .then(response => {
                if (!response.ok) {
                    throw Error('Network request failed.')
                }
                return response;
            })
            .then(data => data.json())
            .then(data => {
                this.setState({
                    books: data
                });
                console.log('parsed json', data);            
            }, (ex) => {
                this.setState({
                    requestError : true
                });
                console.log('parsing failed', ex)
            })
    }   
    render () {
        return (
            <div className="books-container">
                <ul className="books-list">
                    {this.state.books.map(book => <Book {...book} />}
                </ul>
            </div>
        )
    }

    //Book.js - responsible for presenting each book's data
    const Book = (props) => (
        <li>
            <span className="title">{this.props.title}</span>
            <span className="author">Author: {this.props.author</span>
            <span className="genre">Genre: {this.props.genre}</span>
            <span className="read">Read: {this.props.read ? "Yes" : "No"}</span>
        </li>
    )

Answer 1

您应该将 api 的结果存储在状态中并渲染 <Book />里面render功能。

顺便说一句，最好将组件分开:

1. 执行所有逻辑(数据获取等)的容器。
2. 呈现 ui 的演示组件。

您甚至可以使用 redux 走得更远用于处理全局状态，以及 redux-saga用于处理副作用(API 调用)

编辑

这是一个小例子。

表现组件:

const BookListing = ({ books }) => (
  <ul>
    {books.map(book => <li key={book.id}>{book.title}</li>)}
  </ul> 
);

容器组件:

class Books extends Component {
  constructor(props) {
    super(props);
    this.state = {books: []};
  }
  componentDidMount() {
    fetch('http://localhost:8000/api/Books')
      .then(data => data.json())
      .then((data) => { this.setState({ books: data }) }); 
  }
  render() {
    return <BookListing books={this.state.books} />;
  }
}