Question

我正在构建一个用于在React JS中获取天气详细信息的应用程序。我编写了一个api调用，该API返回了与天气相关的数据很少，但我试图在React Bootstrap Table中进行填充。但是我遇到了以下错误-< / p>

TypeError: nextProps.data.slice is not a function

    at BootstrapTable.componentWillReceiveProps (BootstrapTable.js:560)

    at callComponentWillReceiveProps (react-dom.development.js:11527)

    at updateClassInstance (react-dom.development.js:11719)

    at updateClassComponent (react-dom.development.js:13153)

    at beginWork (react-dom.development.js:13824)

    at performUnitOfWork (react-dom.development.js:15863)

    at workLoop (react-dom.development.js:15902)

我的代码-

import React from "react";
import DatePicker from "react-datepicker";
import moment from "moment";
import axios from "axios";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "react-datepicker/dist/react-datepicker.css";

class Landing extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      cityName: "",
      startDate: moment(),
      weatherDetails: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  handleCityChange = event => {
    this.setState({
      cityName: event.target.value
    });
  };

  handleSubmit = e => {
    console.log("button clicked");
    e.preventDefault();
    let requestData = {
      cityName: this.state.cityName,
      date: moment(this.state.startDate).format()
    };

    const cityVal = this.state.cityName;
    const dateVal = moment(this.state.startDate).format();

    axios({
      method: "GET",
      url: `http://localhost:8765/weatherUI/weather/citydate/${cityVal}/${dateVal}`,
      headers: {
        "Content-Type": "application/json"
      },
      data: requestData
    })
      .then(response => {
        console.log(response.data);
        this.setState({
          weatherDetails: response.data
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
    return (
      <div className="container">
        <div className="row">
          <form onSubmit={this.handleSubmit}>
            <div className="row">
              <div className="col-sm-3">City Name</div>
              <div className="col-sm-6">
                <select
                  data-style="btn-new"
                  value={this.state.cityName}
                  onChange={this.handleCityChange}
                >
                  <option value="">Select any city..</option>
                  <option value="Bangalore">Bangalore</option>
                  <option value="Hyderabad">Hyderabad</option>
                  <option value="Kolkata">Kolkata</option>
                  <option value="Mumbai">Mumbai</option>
                  <option value="Pune">Pune</option>
                  <option value="Chennai">Chennai</option>
                  <option value="Delhi">Delhi</option>
                </select>
              </div>
            </div>
            <div className="row">
              <div className="col-sm-3">
                <div className="col-sm-6">Date</div>

                <DatePicker
                  selected={this.state.startDate}
                  onChange={this.handleChange}
                />
              </div>
            </div>
            <div className="row">
              <div className="col-sm-12">
                <button className="btn-primary">
                  {" "}
                  Click to get Weather details
                </button>
              </div>
            </div>
            <BootstrapTable data={this.state.weatherDetails}>
              <TableHeaderColumn dataField="cityName" isKey>
                City name
              </TableHeaderColumn>
              <TableHeaderColumn dataField="countryName">
                Country Name
              </TableHeaderColumn>
              <TableHeaderColumn dataField="temperature">
                Temperature
              </TableHeaderColumn>
              <TableHeaderColumn dataField="cloudsDescription">
                Clouds Description
              </TableHeaderColumn>
              <TableHeaderColumn dataField="windDescription">
                Wind Description
              </TableHeaderColumn>
              <TableHeaderColumn dataField="pressure">
                Pressure
              </TableHeaderColumn>
              <TableHeaderColumn dataField="humidityPercentage">
                Humidity Percentage
              </TableHeaderColumn>
              <TableHeaderColumn dataField="date">Date</TableHeaderColumn>
            </BootstrapTable>
          </form>
        </div>
      </div>
    );
  }
}

export default Landing;

response.data-

{
   "cityName": "kolkatta",

    "countryName": "india",

     "weatherDescription": "light rain",

     "temperature": "25",

     "cloudsDescription": "Broken Clouds",

     "windDescription": "Moderate breeze, 7.2 m/s, West-northwest (290)",

      "pressure": "1007 ",

       "humidityPercentage": "79",

       "date": "2018-08-03"
     }

我正在使用React Bootstrap Table 4.3.1。我以前用过他，并且工作得很好。不知道是什么造成了这个问题。有人可以让我知道我要去哪里了。谢谢！

Answer 1

将response.data格式更改为后端中的数组即可解决此问题。

Answer 2

反应boostrap表需要数组，并且您正在传递对象。因此，如果您想在前端解决此问题，请在handleSubmit中进行以下更改可以解决此问题。基本上，我创建了一个数组，当我从后端将对象作为对象重新存储时，我会将其推送到数组。

handleSubmit = e => {
    console.log("button clicked");
    const weatherDetails = [];
    e.preventDefault();
    let requestData = {
      cityName: this.state.cityName,
      date: moment(this.state.startDate).format()
    };

    const cityVal = this.state.cityName;
    const dateVal = moment(this.state.startDate).format();

    axios({
      method: "GET",
      url: `http://localhost:8765/weatherUI/weather/citydate/${cityVal}/${dateVal}`,
      headers: {
        "Content-Type": "application/json"
      },
      data: requestData
    })
      .then(response => {
        console.log(response.data);
        weatherDetails.push(data);
        this.setState({
          weatherDetails,
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  };

React Bootstrap Table未显示从api响应中获取的数据

2 个答案: