组件返回未在父组件内呈现的 div 数组

Question

我很难弄清楚为什么我在 WorkitemHistory 的 div 中的组件 HistoriesList 没有呈现其内容，尽管我看到了要打印的 console.log。我的代码是：

import React, { useEffect, useRef, useContext } from 'react';
import { fetchHistories } from 'stores/actions';

import { ProjectContext } from 'AppContexts/ProjectContext';

export default function WorkitemHistory({ isOpened, closeModal, curWorkitem }) {
  const [state, dispatch] = useContext(ProjectContext);

  const { histories } = state;

  const modalRef = useRef(null);
  const $modalEl = useRef(null);
  const jQuery = window.$;

  useEffect(() => {
    $modalEl.current = jQuery(modalRef.current);

    $modalEl.current.modal({
      keyboard: false,
      backdrop: 'static',
      show: false,
    });

    if (isOpened) {
      $modalEl.current.modal('show');
    }
  }, [isOpened, $modalEl]);

  useEffect(() => {
    (async () =>
      await fetchHistories(dispatch, { workitemId: curWorkitem }, true))();
  }, []);

  const handleModalClose = (e) => {
    e.preventDefault();
    $modalEl.current.modal('hide');
    $modalEl.current.on('hidden.bs.modal', function (e) {
      closeModal();
    });
  };

  if (histories.isFetching) return 'Loading..';
  console.log('Workitem histories', histories);

  return (
    <div
      className='modal fade'
      id='workitemHistoriesModal'
      tabindex='-1'
      role='dialog'
      ref={modalRef}
    >
      <div className='modal-dialog modal-lg' role='document'>
        <div className='modal-content'>
          <div className='modal-header'>
            <button className='close' type='button' onClick={handleModalClose}>
              <span>&times;</span>{' '}
            </button>
            <h3 className='modal-title'>Work Item - History</h3>
          </div>
          <div className='modal-body'>
            <div className='alert alert-info'>
              Below you find a list of changes that were applied to the
              workitem.
            </div>
            <div>
              <HistoriesList histories={histories} curWorkitem={curWorkitem} />
            </div>
          </div>
          <div className='modal-footer'>
            <button className='btn btn-primary' onClick={handleModalClose}>
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function HistoriesList({ histories, curWorkitem }) {
  const rows = histories.byId[curWorkitem];

  if (rows === void 0 || rows.length === 0) return null;

  console.log(
    'Type of',
    rows.map((row) => row.author)
  );

  return rows.map((row) => <div key={row.author}>{row.author}</div>);
}

附上屏幕截图，您将在那里看到模态框为空。看起来很简单，但我现在已经厌倦了弄清楚这个奇怪的事情的原因是什么。请帮忙。如果我需要提供更多信息，请告诉我。

编辑

按照评论中的要求添加了console.log。

function HistoriesList({ histories, curWorkitem }) {
  const rows = histories.byId[curWorkitem];

  console.log('HistoriesList', rows);

  if (rows === void 0 || rows.length === 0) return null;

  console.log(
    'Type of',
    rows.map((row) => row.author)
  );

  return rows.map((row) => <div key={row.author}>{row.author}</div>);
}

编辑2

我做了这样的代码更改..

function HistoriesList({ histories, curWorkitem }) {
  const rows = histories.byId[curWorkitem];

  console.log('HistoriesList', rows);

  if (rows === void 0 || rows.length === 0) return 'hello';

  console.log(
    'Type of',
    rows.map((row) => row.author)
  );

  return 'world';

chrome控制台证明是在if之后来的，但是modal没有文字变化。

Answer 1

我猜你返回的对象不对，试试这个

return (<>
          rows.map((row) => <div key={row.author}><span>{row.author}</span></div>)
      </>);

Answer 2

用这个替换你的函数，然后让我知道它是否有效

function HistoriesList({ histories, curWorkitem }) {
      const rows = histories.byId[curWorkitem];
    
      console.log('HistoriesList', rows);
    
      if (rows === undefined || rows.length === 0) return 'hello';
    
      return (<>rows.map((row) => (<div key={row.author}><span>{row.author}</span></div>)) 
      </>);
    }

Answer 3

通过删除 jquery 使用效果来尝试您的代码。有时，由于 dom 操作，Jquery+React 会给您带来不良影响。

import React, { useEffect, useRef, useContext } from 'react';
import { fetchHistories } from 'stores/actions';

import { ProjectContext } from 'AppContexts/ProjectContext';

export default function WorkitemHistory({ isOpened, closeModal, curWorkitem }) {
  const [state, dispatch] = useContext(ProjectContext);

  const { histories } = state;

  const modalRef = useRef(null);


  useEffect(() => {
    (async () =>
      await fetchHistories(dispatch, { workitemId: curWorkitem }, true))();
  }, []);

  const handleModalClose = (e) => {
    
      closeModal();

  };

  if (histories.isFetching) return 'Loading..';
  console.log('Workitem histories', histories);

  return (
    <div
      className=`modal fade ${isOpened ? 'in' : ''}` //<-- u only need this
      id='workitemHistoriesModal'
      tabindex='-1'
      role='dialog'
      ref={modalRef}
    >
      <div className='modal-dialog modal-lg' role='document'>
        <div className='modal-content'>
          <div className='modal-header'>
            <button className='close' type='button' onClick={handleModalClose}>
              <span>&times;</span>{' '}
            </button>
            <h3 className='modal-title'>Work Item - History</h3>
          </div>
          <div className='modal-body'>
            <div className='alert alert-info'>
              Below you find a list of changes that were applied to the
              workitem.
            </div>
            <div>
              <HistoriesList histories={histories} curWorkitem={curWorkitem} />
            </div>
          </div>
          <div className='modal-footer'>
            <button className='btn btn-primary' onClick={handleModalClose}>
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function HistoriesList({ histories, curWorkitem }) {
  const rows = histories.byId[curWorkitem];

  if (rows === void 0 || rows.length === 0) return null;

  console.log(
    'Type of',
    rows.map((row) => row.author)
  );

  return rows.map((row) => <div key={row.author}>{row.author}</div>);
}