在 render() 中反应组件 console.logs 2 次

Question

出于某种原因，console.log 为每本书输出 2 次。 我尝试创建新项目，但仍然得到相同的结果。

如果我转换基于 class 的组件并尝试记录道具，我会像我应该的那样为每个元素获得 1 个日志。 它发生在反应版本 16.13.1 而不是 16.8.3

谢谢！

书单组件

import React, { Component } from 'react';
import Book from './Book';

class Booklist extends Component {
  state = {
    books: [
      {
        book: 'book nr 1',
        author: 'john doe',
      },
      {
        book: 'book nr 2',
        author: 'bob doe',
      },
      {
        book: 'book nr 3',
        author: 'peter doe',
      },
    ],
  };

  render() {
    console.log(this.state.books);
    return (
      <section>
        <h3>This is our Booklist</h3>
        <Book book={this.state.books[0]} />
        <Book book={this.state.books[1]} />
        <Book book={this.state.books[2]} />
      </section>
    );
  }
}

export default Booklist;

安慰

书籍组件

import React, { Component } from 'react';

class Book extends Component {
  render() {
    const { book, author } = this.props.book;
    return (
      <article>
        <h3>book:{book}</h3>
        <h4>author:{author}</h4>
      </article>
    );
  }
}

export default Book;

应用程序.js

import React from 'react';
import Booklist from './Booklist';
import './App.css';

const App = () => {
  return (
    <section>
      <Booklist />
    </section>
  );
};

export default App;

Answer 1

您能否提供父 div 和 Book 组件的代码。 此外，您不应该在渲染方法中设置 state，您应该使用构造函数或组件将挂载生命周期事件来设置 state。

import React, { Component } from 'react';
import Book from './Book';

class Booklist extends Component {
  componentWillMount(){
   this.state = {
        books: [
          {
            book: 'book nr 1',
            author: 'john doe',
          },
          {
            book: 'book nr 2',
            author: 'bob doe',
          },
          {
            book: 'book nr 3',
            author: 'peter doe',
          },
        ],
      };
  }

  render() {
    console.log(this.state.books);
    return (
      <section>
        <h3>This is our Booklist</h3>
        <Book book={this.state.books[0]} />
        <Book book={this.state.books[1]} />
        <Book book={this.state.books[2]} />
      </section>
    );
  }
}

export default Booklist;