在React行中获取动态创建的表数据

Question

我对NodeJ更加熟悉而不是做出反应。我已经构建了一个React组件，用于搜索用户输入，并根据用户在搜索输入表单中输入的值以表格格式提供输出。这是我想要的，该模块的代码如下：

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

// API url
const API_URL = 'http://localhost:3000/api/file_infos'

class Search extends Component {
  state = {
    query: '',
    results: []
  }
  getCount = () => {
    axios.get(`${API_URL}count?filter[where][id][regexp]=/${this.state.query}/i`)
      .then(count => {
        this.setState({
          results: count.data
        })
      })
  }

  // query loop back API for matching queries base on text input
  getInfo = () => {
    axios.get(`${API_URL}?filter[where][id][regexp]=/${this.state.query}/i&filter[limit]=20`)
      .then(response => {
        this.setState({
          results: response.data
        })
      })
  }
  // check to see if input on the search bar has changed and update the search query accordingly 
  handleInputChange = () => {
    this.setState({
      query: this.search.value
    }, () => {
      if (this.state.query && this.state.query.length > 1) {
        if (this.state.query) {
          this.getInfo()
        }
      } else if (!this.state.query) {
      }
    })
  }
  // render form and pass results back to the home component 
  render() {
    return (
      <div>
      <form>
        <input
          placeholder="Search for..."
          ref={input => this.search = input}
          onChange={this.handleInputChange}
        />

      </form>

      <Suggestions results={this.state.results} />
      </div>
    )
  }
}

export default Search

第二个模块是建议模块，以表格式显示输出。

我正在构建的应用程序的下一部分将根据用户选择的表行打开一个文件。我希望该表数据返回到一个函数，以便我可以向我的API发出http发布请求，然后使用NodeJS模块打开该文件。

我希望建议组件返回表单元格中数据项的值，以便可以将数据发送到API以便打开我的文件。到目前为止，我提出的代码仅返回未定义的错误。

以下是我目前所拥有的：

import React from 'react';
// return results in a table format based on the text input entered 
 const Suggestions = (props) => {

   const state = {
        results: []
    }

    const handleFormOpen = () => {
        this.setState({
            results: this.results.value
        },
        console.log(this.state.results)
        )
    }

    const options = props.results.map(r => (
        <tr key={r.id} ref={tr => this.results = tr} onClick={handleFormOpen.bind(this)}>
            <td>{r.id}</td>
            <td>{r.OriginalPath}</td>
            <td>{r.CreateDate}</td>
            <td>{r.AccessDate}</td>
            <td>{r.WriteDate}</td>
            <td><i className="fas fa-book-open"></i></td>
        </tr>
    ))
    return <table className="striped responsive-table">
        <thead>
            <tr>
                <th>File Name</th>
                <th>Parent Directory</th>
                <th>Creation Date</th>
                <th>Access Date</th>
                <th>Write Date</th>
                <th>Open File</th>
            </tr>
        </thead>
        <tbody>
            {options}
        </tbody>
    </table>
}

export default Suggestions;

我现在真的不确定是否要尝试以正确的方式解决此问题。我在想，建议组件可能需要转变成完整的类扩展组件，但是到那时我还是很迷茫。有人可以请我指出愚蠢的事，并让我朝正确的方向前进吗？

更新

根据评论的要求，这是我的浏览器中的错误日志：

Suggestions.js:10 Uncaught TypeError: Cannot read property 'results' of undefined
    at Object.handleFormOpen (Suggestions.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:262)
    at executeDispatch (react-dom.development.js:593)
    at executeDispatchesInOrder (react-dom.development.js:615)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:724)
    at forEachAccumulated (react-dom.development.js:694)
    at runEventsInBatch (react-dom.development.js:855)
    at runExtractedEventsInBatch (react-dom.development.js:864)
    at handleTopLevel (react-dom.development.js:4857)
    at batchedUpdates$1 (react-dom.development.js:17498)
    at batchedUpdates (react-dom.development.js:2189)
    at dispatchEvent (react-dom.development.js:4936)
    at interactiveUpdates$1 (react-dom.development.js:17553)
    at interactiveUpdates (react-dom.development.js:2208)
    at dispatchInteractiveEvent (react-dom.development.js:4913)

Answer 1

第一件事，因为您的Suggestions组件使用状态播放，所以建议您使用statefull组件。

Stateless component用于获取道具和返回jsx元素，无状态组件中不会有任何状态突变。这称为pure function in javascript。希望这可以弄清楚。

此外，由于您将handleFormOpen声明为箭头函数，因此无需进行绑定。箭头功能会自动进行绑定。如果您不想使用箭头功能并想绑定它，那么请始终仅在构造函数中进行绑定，而不要像在map中那样在组件中的任何位置进行绑定。

PFB已更正Suggestions组件代码

import React, { Component } from 'react';
// return results in a table format based on the text input entered 
 export default class Suggestions extends Component {
  constructor(props){
    super(props);
    this.state = {
      results: [],
      value: ""
    }
  }


  handleFormOpen = (path, id) => {
    console.log("id", id, path);//like wise pass value to this function in .map and get the value here
      this.setState({
          value: id
      });
  }


    render(){ 
      const { results } = this.props;
      return (<div>
        <table className="striped responsive-table">
          <thead>
              <tr>
                  <th>File Name</th>
                  <th>Parent Directory</th>
                  <th>Creation Date</th>
                  <th>Access Date</th>
                  <th>Write Date</th>
                  <th>Open File</th>
              </tr>
          </thead>
          <tbody>
              {Array.isArray(results) && results.length > 0 && results.map(r => (
                <tr key={r.id} ref={tr => this.results = tr} onClick={() => this.handleFormOpen(r.OriginalPath, r.id)}>
                    <td>{r.id}</td>
                    <td>{r.OriginalPath}</td>
                    <td>{r.CreateDate}</td>
                    <td>{r.AccessDate}</td>
                    <td>{r.WriteDate}</td>
                    <td><i className="fas fa-book-open"></i></td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>)
    }    
}

export default Suggestions;

Answer 2

您正在使用功能组件中的状态，您需要使用React组件

import React from 'react';
// return results in a table format based on the text input entered 
 class Suggestions extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       results: [],
     }
   }


    handleFormOpen = () => {
      this.setState({
          results: this.results.value
      },
      console.log(this.state.results)
      )
    }

    render () {
      const options = this.props.results.map(r => (
          <tr key={r.id} ref={tr => this.results = tr} onClick={handleFormOpen.bind(this)}>
              <td>{r.id}</td>
              <td>{r.OriginalPath}</td>
              <td>{r.CreateDate}</td>
              <td>{r.AccessDate}</td>
              <td>{r.WriteDate}</td>
              <td><i className="fas fa-book-open"></i></td>
          </tr>
      ))
      return (
        <table className="striped responsive-table">
            <thead>
                <tr>
                    <th>File Name</th>
                    <th>Parent Directory</th>
                    <th>Creation Date</th>
                    <th>Access Date</th>
                    <th>Write Date</th>
                    <th>Open File</th>
                </tr>
            </thead>
            <tbody>
                {options}
            </tbody>
        </table>
      )
    }
}

export default Suggestions;