使用参数 ReactJS 从 API 请求中获取信息

Posted 2023-02-22

【中文标题】使用参数 ReactJS 从 API 请求中获取信息

【英文标题】：Get info from API request with parameters ReactJS

【发布时间】：2019-11-25 18:45:46

【问题描述】：

我正在尝试根据我发送的信息从 API 获取信息，但有两个问题：

我对发送到 API 的信息（年份和期限）进行了硬编码，因为它应该返回我尝试存储的信息，但它不起作用

我正在尝试将它用作函数，然后填充表格，但由于它无法首先获取信息，所以它一直给我一个错误，所以我猜问题在于我从 API 请求信息的方式（我是整个 React/javascript 的新手）

这就是我的代码的样子

class Stu extends Component 
  constructor(props) 
    super(props);

    this.state = 
      students: [],
    
    this.fetch = this.fetch.bind(this)
    this.getStudents = this.getStudents.bind(this)
  

  getStudents(year, term) 
    return this.fetch(`http://10.123.456.321/Stu/`, 
        method: 'POST',
        body: JSON.stringify(
            year,
            term
        )
    ).then(data => 
      this.setState(
        students: data.results.map(item => (
          firstName: item.firstName,
          lastName: item.lastName,
          ID: item.ID,
          term: item.term,
          year: item.year,
        ))

      )
      console.log(this.state);
    )
  

  fetch(url, options) 
    // performs api calls sending the required authentication headers
    const headers = 
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    

    return fetch(url, 
        headers,
        ...options
    )
        .then(response => response.json())
  

  renderTableData() 
    return this.state.projects.map((student, index) => 
       const  firstName, lastName, ID, term, year  = student
       return (
          <tr>
             <td>firstName</td>
             <td>lastName</td>
             <td>ID</td>
             <td>term</td>
             <td>year</td>
          </tr>
       )
    )
  
// 

  render() 
    return (
      <Container>
        this.getStudents("2019", "summer") // this is supposed to be called from a button click, but I tried hardcoding those values and it doesn't call the API properly, both values are strings
        <Form>
          <div>
          <table id='students'>
               <tbody>
               <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>ID</th>
                <th>Term</th>
                <th>Year</th>
               </tr>
               this.renderTableData()
               </tbody>
            </table>
          </div>
        </Form> 
      </Container>
    );
  


export default Stu;

【参考方案1】：

我认为问题在于您拨打getStudents 的方式。我认为您的 API 应该以application/json 的形式接受请求有效负载。但是通过stringify发送它，您将其发送为string。因此问题。

摆脱JSON.stringify调用并尝试它是否有效：

getStudents(year, term) 
  return this.fetch(`http://10.123.456.321/Stu/`, 
    method: 'POST',
    body: 
      year,
      term
    
  ).then(data => 
    this.setState(
      students: data.results.map(item => (
        firstName: item.firstName,
        lastName: item.lastName,
        ID: item.ID,
        term: item.term,
        year: item.year,
      ))

    )
    console.log(this.state);
  )

可能还有其他问题。如果您可以共享一个最小的 CodeSandbox 示例以供大家一起使用，那就太好了。