如何找出ReactJS中的错误来自哪里？

Question

我收到此错误是因为我不小心在渲染方法中调用了某些方法。由于我的应用程序代码非常大，我无法找出它来自哪里。

当我单击控制台中的 index.js 链接时，它会将我带到以下代码。

这是我在进行一些调试（调用堆栈）后发现的，但这不是确切的完整组件代码，因为组件中的代码行太多，我只是在这里发布其中的一部分。这段代码有什么问题吗：

class Sample extends React.Component {
  constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: '',
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    if (this.state.activeKey === '') {
      activeKey = this.getDefaultKey();
      this.handleSelect(activeKey);
    }
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Answer 1

我会首先使用 react 开发工具 chrome 扩展，如果你使用的是 redux，你也可以安装 redux 开发工具，这两个工具都可以发现 state 或 props 中的错误。

不过，最有可能的是，您的某个组件存在错误，您应该使用代码片段或代码库链接来更新您的问题。

Answer 2

您在渲染函数中调用 this.handleSelect，该函数调用 setState。正如错误所示，你不能这样做。在没有看到整个组件并知道它应该做什么的情况下不能肯定地说，但我最好的猜测至少不会出错：

class SampleOptions extends React.Component {
  constructor(props, context) {
     super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: this.getDefaultKey(),
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Answer 3

enter code here

从 'react' 导入 React, { useState, useEffect }；从 '../../components/Navbar' 导入导航栏；从 '@mui/icons-material/Search' 导入 SearchIcon；从 '@mui/ 导入 TuneIcon icon-material/Tune';导入“../../styles/News.css”;从'@mui/icons-material/BookmarkBorder'导入BookmarkBorderIcon;从'../../Image'导入图像;导入{ 链接 } from 'react-router-dom';function News() { const [dataCategory, setDataCategory] = useState([]); const [dataNews, setDataNews] = useState([]); const [selectedCategory, setSelectedCategory] = useState(null); const [selectedBookmarkIcon, setSelectedBookmarkIcon] = useState(false); const [isFirstTime, setIsFirstTime] = useState(true); console.log(数据新闻); useEffect(() => { const fetchData = async () => { const responseCategory = wait fetch('jojo'); const dataCategory = wait responseCategory.json(); setDataCategory(dataCategory); const responseNews = wait fetch('jojo') '); const dataNews =等待responseNews.json(); setDataNews(dataNews); }; fetchData(); if (isFirstTime) { setIsFirstTime(false); setSelectedBookmarkIcon(true); } }, [isFirstTime]); const handleCategoryClick = (类别) => { setSelectedCategory(类别); setSelectedBookmarkIcon(假); }; return ( <>

setSelectedBookmarkIcon(!selectedBookmarkIcon, setSelectedCategory(false))} style={{ color: selectedBookmarkIcon ? 'var(--color-3)' : '继承' }} /> {dataCategory.map(category) => (
• handleCategoryClick(category.Category_ID)} style={{ borderColor: selectedCategory ===category.Category_ID ? 'var(--color-3)' : '继承' }} > {category.CategoryName} ))}

} /> {dataNews.filter(news => news.NewsCategory === selectedCategory).map((news, index) => ( /newscontent/:${news.News_ID}} key={news.News_ID}> 0 ? '10px' : ' 0' }}> {news.NewsTitle} ם پ׌ 1 {news.NewsReference} ))} )}导出默认新闻;

从 'react' 导入 React;import '../styles/News.css';const NewsContent = ({ id , dataNews }) => { console.log(dataNews);控制台.log(id); if (!dataNews) { return

正在加载...

; const newsItem = dataNews.find(news => news.News_ID === id); console.log(newsItem); return ( {newsItem ? ( {newsItem.NewsText} ) : (

bom

)} );};导出默认新闻内容;

我想要点击新闻的时候就上传新闻内容，但是控制台却显示undefind