Question

我正处于反应的学习阶段，并试图弄清楚如何获取api数据并将其作为道具传递，所以我在以下位置创建了自己的api文件 github并尝试从中获取api数据，这是链接下方：

https://raw.githubusercontent.com/faizalsharn/jokes_api/master/jokesData.js

由于某种原因，未从api中获取数据，并且没有被当作道具传递给别人，请向我解释我在做什么错误的，请原谅我，如果仍然有任何明显的错误初学者水平

App.js

import React, {Component} from "react"
import Joke from "./joke"

class App extends Component {
    constructor() {
        super()
        this.state = {
            loading: false,
            jokeComponents: []
        }
    }

    componentDidMount() {
        this.setState({loading: true})
        fetch("https://raw.githubusercontent.com/faizalsharn/jokes_api/master/jokesData.js")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    loading: false,
                    jokeComponents: data.jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)  
                })
            })
    }

    render() {
        const text = this.state.loading ? "loading..." : this.state.jokeComponents
        return (
            <div>
                {text}   
            </div>
        )
    }
}

export default App

joke.js

import React from "react"

function Joke(props) {
    return (
        <div>
            <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>
            <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>
            <hr/>
        </div>
    )
}

export default Joke

Answer 1

我检查了API，发现在获取API中调用SHA-1时，它无法正常工作。

这是由于API响应中的错误所致。您只需要返回一个裸数组，而不返回带有变量的API。

作为参考，请检查Jsonplaceholder Fake API的返回json。 https://jsonplaceholder.typicode.com/posts

希望此修复您的错误。

另外，对于jokeComponents的状态，请只在响应中传递数组，而不要操纵数据。如果状态已更改，只需在signingReport(debug)函数中将response.json()用于jokeArray。：）

Answer 2

要在加载后显示内容并隐藏加载指示符，请使用模拟异步操作的函数，然后将显示数据。由于您的API出现问题，因此我为另一个API展示了此示例。我希望你能解决这个问题。还设置标头以允许跨域数据访问。

App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Joke from "./Joke";

class App extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      jokeComponents: []
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts",{
      headers: { crossDomain: true, "Content-Type": "application/json" }
    }).then(response=>response.json())
      .then(data => {
        console.log(data);
        this.setState({
          jokeComponents: data.map(joke => (
            <Joke
              key={joke.id}
              question={joke.title}
              punchLine={joke.body}
            />
          ))
        });
      });
      demoAsyncCall().then(() => this.setState({ loading: false }));
  }

  render() {
    const { loading } = this.state;

    if(loading) { 
      return "loading...";
    }
    return <div>{this.state.jokeComponents}</div>;
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}


ReactDOM.render(<App />, document.getElementById('root'));

相同的工作代码在下面的CodeSandbox中设置：

Answer 3

Gideon Arces正确地解释了您的第一个错误，但还有更多工作要做：

您需要将.json文件格式化为json，这与javascript不同。例如，虽然这是JavaScript {id: 1, question: "?"}，但不是json。 Json必须采用以下格式：{"id": "1", "question":"?"}，并在属性名称两边加上引号。
您需要在componentDidMount中获取数据并在那里调用setState
您需要从状态中提取数据并在render()中呈现组件。通常，这是通过创建组件数组并将其放入{}内部的返回中来完成的。在此处查看更多信息：Lists and Keys
在尝试将ui与api结合之前，从硬编码到组件中的虚拟数据开始总是一个好主意。请参见下面的componentDidMount()，其中我对一些笑话进行了硬编码。这样，您可以将ui代码中的错误与网络/ api代码中的错误隔离开来。

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: false,
            jokes: []
        };
    }

    componentDidMount() {
        // this.setState({loading: true})
        //     fetch("https://raw.githubusercontent.com/faizalsharn/jokes_api/master/jokesData.js")
        //         .then(response => response.json())
        //         .then(data => {
        //             console.log(data);
        //             this.setState({
        //                 loading: false,
        //                 jokes: data
        //             })
        //         })
        const json = `[
      {
          "id": "1",
          "question": "?",
          "punchLine": "It’s hard to explain puns to kleptomaniacs because they always take things literally."
      },
      {
          "id": "2",
          "question": "What's the best thing about Switzerland?",
          "punchLine": "I don't know, but the flag is a big plus!"
      }
  ]`;

        const jokes = JSON.parse(json);
        this.setState({ jokes });
    }

    render() {
        const jokeComponents = this.state.jokes.map(joke => (
            <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
        ));
        console.log(jokeComponents);
        const text = this.state.loading ? "loading..." : jokeComponents;
        return <div>Text: {text}</div>;
    }
}

function Joke(props) {
    console.log("joke props:", props);
    return (
        <div>
            <h3 style={{ display: !props.question && "none" }}>
                Question: {props.question}
            </h3>
            <h3 style={{ color: !props.question && "#888888" }}>
                Answer: {props.punchLine}
            </h3>
            <hr />
        </div>
    );
}

如何从api获取数据并将其作为道具传递

3 个答案: