React：功能組件渲染兩次相同的Div

Question

我正在嘗試使用 React 和 Redux 制作 web 應用程序。 減速器調用我后端的 api ，這個 api 返回類別的 Json。 但是我意識到當我從一個組件調用這個減速器和 state 時，出於某種原因，包含 state 的 div 被渲染了兩次。 在第一次渲染中，我的 json 類別數組不存在，但在第二次渲染中，我的 json 類別數組存在。

我渲染的控制台 output

這是我的組件代碼：

import React, { useRef, useEffect} from 'react'
import { NavLink, Link } from 'react-router-dom'
import { connect } from 'react-redux'
import PrivateMenu from '../Molecules/PrivateMenu'
import PublicMenu from '../Molecules/PublicMenu'

<div className="header-list-categories-container">
                <div className="sub-list-container">
                    <label htmlFor="">{console.log('')}</label>
                    <label htmlFor="">{console.log('the div X starts')}</label>
                    <label htmlFor="">{console.log(thecategories)}</label>                     
                    <label htmlFor="">{thecategories?console.log('the array exists'):console.log('the array does not exists')}</label>
                    <label htmlFor="">{console.log('the div X ends')}</label>                                                     
                </div>
        </div>

const mapStateToProps = state =>(
    {
        thecategories : state.categoriaReducer.categories
    }
)


export default connect(mapStateToProps)(Header)

這是我的 app.jsx 調用我的組件功能 Header：

import React from 'react';
import '../App.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Header from './Organisms/Header'
import Home from './pages/Home'

const App = ()=>(
  <Router>
    <Header />

      <Switch>
        <Route path="/" exact component={Home} />


      </Switch>
  </Router>
  )

export default App;

這是我的 index.js 調用 app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import store from './redux/store'
import { Provider } from 'react-redux'
import { getallcategories} from './redux/actionCreators'


store.dispatch(getallcategories())

ReactDOM.render(
<Provider store ={store}>
    <App />
</Provider>
,document.getElementById('root'));

Answer 1

您所描述的似乎是從后端異步獲取數據時的正常行為 - 組件在掛載期間呈現沒有數據，然后，當它的道具發生變化時（ react-redux注入它們），React 重新呈現它，因為它應該使用實際數據。

一般約定是在尚無可用數據時向用戶顯示一些信息 - 無論是加載微調器還是自定義“空列表”組件。

例子：

// your Header component would look like so

// I've defaulted the 'thecategories' prop to an empty array for ease of use
const Header = ({ thecategories = []}) => {
  if (thecategories.length === 0) {
    return (<div>No data available.</div>);
  } else {
    return (
      <div className="header-list-categories-container">
        <div className="sub-list-container">
          <label htmlFor="">{console.log('')}</label>
          <label htmlFor="">{console.log('the div X starts')}</label>
          <label htmlFor="">{console.log(thecategories)}</label>                     
          <label htmlFor="">{console.log('the array always exists at this point ;)')}</label>
          <label htmlFor="">{console.log('the div X ends')}</label>                                                     
        </div>
      </div>)
  };
);