Question

我正在尝试根据我在List<String> success = new ArrayList<>(); List<String> failure = new ArrayList<>(); Map<List<String>,List<String>> masterLista = new HashMap<>(); masterLista.put(success, failure); masterLista = list.stream().map(l -> { String newS=serviceApi.getClearSongName(l); if(newS!=null){ //Here the return should update the sucess list return serviceApi.getClearSongName(l); } else{ //Here the return should update the failure list return l; } }).collect(Collectors.toList());中传递的ID渲染一些数据，当我url console.log()时，我可以访问数据，但我不知道如何传递给“ articleComponent”

res.json

当我单击以下链接时，我可以访问此组件：

console.log()

Answer 1

对于fetch调用的响应，您没有做任何事情。

当React组件是功能组件（而不是类组件）时，该函数本身就是render函数。这是一个同步函数，因此您不能只在函数主体中进行异步调用。

例如，当组件进入componentDidMount生命周期挂钩时，您可以调用fetch函数，并且每当返回时，就可以将结果存储在组件状态中（对于类component使用setState或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函数，则应

使用useState（null）为数据创建状态，其中null为初始状态
使用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

data

只需将API端点替换为所需的端点即可。希望这会有所帮助！

Hi @Erwin,

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

数据未在React组件中呈现

3 个答案: