Question

我正在尝试使用React和React Table创建一个Jeopardy应用程序，但遇到了麻烦。我正在尝试从危险API中获取列标题以使用类别的实际名称填充。从API提取的对象如下所示：

"id": 11111,
"title": "papers",
"clues_count": 5,
"clues":

，其中title是类别的名称。该请求进行了6次，每列一次。现在，我已经将“ x类”硬编码为每一列的标题值。我不知道如何获得标题作为列标题。我的代码如下（我知道它很杂乱，需要重构，但是我已经编码了大约6周，所以请耐心等待）：

列组件：

import React, { Component } from 'react';
import axios from 'axios';
const CAT_NUM = function () {
  return Math.floor(Math.random() * Math.floor(18418));
}

const URL = `http://jservice.io/api/category?id=`

class Column extends Component {
  constructor(props) {
    super()

    this.state = {
      category: '',
      clues: []
    }

    this.colRef = React.createRef();
  }

  getClues = function () {
    let self = this;

    const category = CAT_NUM();
    const clueUrl = URL + category;

    const request = axios.get(clueUrl)
      .then(function (response) {

        //fetch the category title
        const categoryTitle = response.data.title;

        //get an array of all the clues for this category
        const clueArray = response.data.clues;

        //grab the first five clues -- could be modified to grab a random five, but there are 18418 categories...
        const fiveClues = clueArray.slice(0, 5);=

        //set state to contain category, five clues
        self.setState({
          category: categoryTitle.toUpperCase(),
          clues: fiveClues
        })

        if (self.props.hasOwnProperty('addColumnData')) {
          self.props.addColumnData(self.state);
        }

        //check the state
    });
  }

  render () {
    {if (this.state.clues.length === 0) {
      this.getClues();
      return (
        <div>Loading...</div>
      )
    }
  }

    return (
        <div ref={this.colRef} />
    );
  }
}

export default Column

应用程序组件：

import React, { Component } from 'react';
import Board from './components/Board.js';
import Column from './components/Column.js';
import ReactTable from "react-table";

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import "react-table/react-table.css";
import "./index.css";


class App extends Component {
  constructor() {
    super()

    this.state = {hasData:false};

    this.columnData = [];

    this.addColumnData = this.addColumnData.bind(this);
    this.renderColumns = this.renderColumns.bind(this);

  }
//Create each column with dollar amounts
  columns = [
    {
      Header: 'Category 1',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 2',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 3',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 4',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 5',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 6',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    }
  ]
  renderColumns () {
    let columnArray = [];
    console.log('render columns fn sees: ', this);
    for (let i=0; i<6; i++) {
      columnArray.push(
        <Column addColumnData={this.addColumnData} key={i}/>
      )
    }
    console.log(this.columnData)
    // const question = this.columnData[0].clues[0].question;
    // console.log(question)
    return columnArray;
  }


  addColumnData (object) {
    this.columnData.push(object)
    if (this.columnData.length === 6) {
      this.setState({columnData: this.columnData, hasData: true})
    }
    // console.log('columnData contains: ', this.columnData)
    // return this.columnData
    }


  render() {
    const getTdProps = (state, rowInfo, column, instance) => {
      return {
        onClick: (e, handleOriginal) => {
            console.log('You clicked: ', column.Header, rowInfo.original.value)
        }
      }
    }

    if(!this.state.hasData) {
      return (
        <div>
          {this.renderColumns()}
        </div>
      )
    }
return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Project (in) Jeopardy</h1>
    </header>
    <Column />
    <div className="container">
      <div className="row">
        <div className="col-md-2">
          <div className="score">
            Player 1 Score: {}
          </div>
        </div>
        <div className="col-md-8" id="table">
          <ReactTable
            style={{
              height:"500px",
              textAlign:"center",
              backgroundColor: "#060CE9",
              borderRadius: "5px",
              borderColor: "#000000",
              color: "#FFCC00",
              fontSize: "20",
              verticalAlign: "middle"
            }}
            data={this.state.columnData[0].clues}
            columns={this.columns}
            defaultPageSize = {5}
            sortable={false}
            showPagination={false}
            showPageSizeOptions={false}
            getTdProps={getTdProps}
          />
        </div>
        <div className="col-md-2">
          <button type="button" className="btn btn-primary">Restart</button>
        </div>
      </div>
    </div>
  </div>
);
  }
}

export default App;

自从我粘贴了一堆代码后，我将了解是否没人能解决这个问题。对不起，我真的很陌生。感谢您抽出宝贵时间来帮助我！

Answer 1

您尝试过

`Header : `${title}`

其中的“`”字符是反引号（在我的Mac上，其键位于esc键的下面），而 title 是保存title的数据库（或json）值的变量。

反应表列标题数据

1 个答案: