數據未在React組件中呈現

Question

我正在嘗試根據我在url傳遞的id呈現一些數據，當我console.log() res.json我可以訪問數據，但是我不知道如何傳遞給'articleComponent'

const Articles = () => {


  const query = (id) => {
    fetch(`https://someurl.herokuapp.com/job/${id}`).then(res => console.log(res.json()))
  }


  const pathname = window.location.pathname.split('/');
  const job_id = pathname[pathname.length - 1];
  const job = query(job_id);
  let position_name;
  let workplace_name;
  console.log(job_id)
  if (job) {
    position_name = position_name;
    workplace_name = workplace_name;
  }


  return (
    <ArticleComponent
      position_name={position_name}
      workplace_name={workplace_name}
    />
  );
};

export default Articles

console.log()返回“待處理，但我可以看到所有對象”

單擊此鏈接時，我可以訪問此組件：

    <Link
          className="link-apply"
          to={{pathname: `/job/${job._id}`,
                          state: job
                        }}>
                        <p className="place">{job.workplace_name}</p>
                        <p className="location-job">{job.location}</p>
                      </Link>

Answer 1

您對fetch調用的響應沒有做任何事情。

當React組件是功能組件（而不是類組件）時，該函數本身就是render函數。 這是一個同步函數，因此您不能只在函數主體中進行異步調用。

例如，當組件進入componentDidMount生命周期掛鈎時，您可以調用fetch函數，並且每當返回時，您都可以將結果存儲在組件狀態中（將setState用於類component或將useState掛鈎用作功能組件）。

所以：

 class Articles extends React.Component { state = { data: undefined }; componentDidMount() { const id = "some value"; fetch(`https://someurl.herokuapp.com/job/${id}`) .then(res => res.json()) .then(response => this.setState({ data: response })); } render() { const pathname = window.location.pathname.split('/'); const job_id = pathname[pathname.length - 1]; const job = query(job_id); let position_name; let workplace_name; console.log(job_id) if (job) { position_name = position_name; workplace_name = workplace_name; } return ( <ArticleComponent data={this.state.data} position_name={position_name} workplace_name={workplace_name} /> ); } }; export default Articles 

Answer 2

您必須分開加載邏輯和渲染。 如果您使用的是Component函數，則應

1. 使用useState（null）為數據創建狀態，其中null為初始狀態

2. 使用useEffect開始在組件安裝上獲取數據，其中[]作為第二個參數通知您對您的useEffect不依賴於任何值的反應，並且應該僅在組件安裝上運行一次

import React, { useEffect, useState } from 'react';

const query = async (id, onFetchData) => {
  const res = await fetch(`https://someurl.herokuapp.com/job/${id}`);
  const data = await res.json();
  onFetchData(data);
}

const getJobId = () => {
  const pathname = window.location.pathname.split('/');
  return pathname[pathname.length - 1];
}

const Articles = () => {
  const [job, setJob] = useState(null);
  useEffect(() => {
    query(getJobId(), setJob);
  } ,[]);

  return <>{
      job
      ? <ArticleComponent
        position_name={job.position_name}
        workplace_name={job.workplace_name}
      />
      : <span>loading...</span>
     }</>
};

export default Articles

Answer 3

Hi @Erwin,

Here is the working example for your query. Checkout the CodeSandbox - [https://codesandbox.io/s/mystifying-wave-qxrnp][1]

只需將API端點替換為所需的端點即可。 希望這可以幫助！

import React from "react";
import ReactDOM from "react-dom";
import ArticleComponent from "./ArticleComponent";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: undefined
    };
  }

  componentDidMount() {
    const pathname = window.location.pathname.split("/");
    const job_id = pathname[pathname.length - 1];
    console.log(job_id);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data ? (
      <ArticleComponent data={this.state.data} />
    ) : (
      "Loading"
    );
  }
}

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