javascript - 元素类型无效 : expected a string & search input not filtering

Question

这段代码有两个问题:

首先:我在代码中有以下错误:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.您可能忘记了从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

检查 App 的渲染方法.

我该如何解决这个问题？您可以在此处找到错误:https://codesandbox.io/s/l5k6w5rqjl

其次，里面<App/> , 在第 49 行 console.log(data.contents);出现未定义。这里有什么问题？这是<FileTree/>的原因吗？搜索过滤不正确？

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import SearchEngine from "./components/search_bar";
import { FileTree } from "./components/file_tree";
import { TextBox } from "./components/text_box";
import { data } from "./components/file_tree";

// Dummy data set
export const root = data[0];

class App extends Component {
   constructor(props) {
    super(props);
    this.state = {
      activeNode: "",
      root: root
    };

this.onChange = this.onChange.bind(this);
}

  // Props from <TextBox/> to <App/>
  liftStateUp = data => {
    this.setState({ activeNode: data });
  };

  onSubmitSearch = (e, search) => {
    e.preventDefault();
    let tree = JSON.stringify(root); // always search full data tree
    tree = JSON.parse(tree); // JSON.stringify and then JSON.parse are
    console.log(tree);
    if (!search || search === "") {
      // if search is undefined, null or empty, set root to full data tree
      this.setState({ root: tree }); // state.root is filtered tree passed     to the FileTree component
  return;
} else {
  this.setState({
    root: this.filterTree(tree, search.toLowerCase())
  });
}
/* uncoment if you need to filter already filtered tree */
// tree = JSON.stringify(this.state.root);
// tree = JSON.parse(tree);
  };

  filterTree = (data, search) => {
    let children = data.contents;
    console.log(data.contents);

    if (!children || !children.length) {
      if (!data.name.toLowerCase().includes(search)) {
        data.remove = true;
      }
    } else {
      for (let i = children.length - 1; i >= 0; i--) {
        this.filterTree(children[i], search);
        if (children[i].remove) {
          children.splice(i, 1);
        }
      }
      if (!children.length) {
        data.remove = true;
      }
    }
    return data;
  };

  onChange(data) {
    this.setState({ searchTerm: data });
  }

  render() {
    return (
      <div>
        <div className="col-md-12">
          <SearchEngine
            className="form-control"
            onChange={this.onChange}
            onSubmitSearch={this.onSubmitSearch}
          />
        </div>
        <div className="col-md-6">
          <FileTree
            root={this.state.root}
            liftStateUp={this.liftStateUp}
            searchTerm={this.state.searchTerm}
          />
        </div>
        <div className="col-md-6">
          <TextBox content={this.state.activeNode} />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

变化:

1-在directory.js文件中添加一些代码:

import React from 'react'

export const Directory = () => <div>Directry</div>;

2- 您没有从 file_tree 文件导出 FileTree:

export class FileTree extends React.Component {....}

3- 在 search_bar 文件中，您将同一组件导出两次，一次是默认的，一次是命名的导出，因此请在此处删除导出关键字:

导出类 SearchEngine

Working Code.