Question

我一直在寻找约2小时的原因，为什么我没有向页面显示任何信息。我控制台从一个简单的随机引用api中记录了我的响应，它显示，作者：和引用：在控制台中，但是这些没有出现在我的字段中，我所看到的只是按钮。

import React, { Component } from 'react';
import QuoteMachine from './Quotemachine';


const END_POINT = 'https://random-quote- 
generator.herokuapp.com/api/quotes/random';

class App extends Component {

constructor(props) {
    super(props);
    this.state = {
        quote: {
            text: '',
            author: ''
        }
    }
}

getQuote() {
fetch(END_POINT)
    .then(response => response.json())
        .then(response => {
            this.setState = ({
                quote: response
            });
            console.log(response);
        })
    }

componentDidMount() {
    this.getQuote();
    }



render() {
    return (
        <div className="App">
            <div className="container">
                <QuoteMachine quote= {this.state.quote} />
                <button id="new-quote" className="primary-color- 
 background" onClick={() => this.getQuote()}>New quote</button>
            </div>
        </div>
    );
    }
}
export default App;

然后这是我的Quotemachine.js

import React from 'react'
import PropTypes from 'prop-types';

const QuoteMachine = (props) => {
    return (
        <div className="quote-box">
            <div className="text">
            <span>{props.quote.text}</span>
            </div>
            <div className="author">
            <span >{props.quote.author}</span>
            </div>
        </div>
    );
};

QuoteMachine.propTypes = {
    quote: PropTypes.object.isRequired
};

export default QuoteMachine;

它只显示按钮，但console.log显示

对象作者：＆＃34; Thomas Henry Huxley（1825-1895）＆＃34;

报价：＆＃34;尝试学习关于某事的一切事物。＆＃34; 的原：对象

Answer 1

安装React Developer Tools插件并检查API调用后您的状态是否正在发生变化

React API元素未在页面上显示

1 个答案: