Question

以下代码运行顺利，但我希望以一种方式实现它，当我执行 getNextPers（）并且没有信息时，它会隐藏/删除 Ver Mais 按钮。我一直在寻找解决方案，但没有找到解决方案，所以任何帮助都是好的。谢谢。

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class List extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            personagens: [],
            page: 1,
            showBtn: true,
        };
        this.getNextPers = this.getNextPers.bind(this);
    }

    getNextPers(){
        const peopleApiEndpoint = `https://swapi.co/api/people/${this.state.page}`;
        axios.get(peopleApiEndpoint).then((p) =>
            if(p=={}){
                this.setState({ showBtn: false });
            }
            else {
                this.setState({ personagens: this.state.personagens.concat(p), page: this.state.page+1 })
            }
        );
    }

    render(){
        return (
            <div>
                <p><b>Personagens:</b></p>
                {this.state.personagens.map((pers, i) => (
                    <div key={i}>
                        <br />
                        <p><i>Name:</i> {pers.data.name}</p>
                        <p><i>Height:</i> {pers.data.height} cm</p>
                        <p><i>Mass:</i> {pers.data.mass} kg</p>
                    </div>
                ))}
                <button onClick={this.getNextPers}>Ver Mais</button>
            </div>
        );
    }
}

ReactDOM.render(<List />, document.getElementById('root'));

＆＃13;

Answer 1

由于您在组件中存储showBtn状态，因此可以使用它按条件有条理地呈现按钮：

render(){
        return (
            <div>
                <p><b>Personagens:</b></p>
                {this.state.personagens.map((pers, i) => (
                    <div key={i}>
                        <br />
                        <p><i>Name:</i> {pers.data.name}</p>
                        <p><i>Height:</i> {pers.data.height} cm</p>
                        <p><i>Mass:</i> {pers.data.mass} kg</p>
                    </div>
                ))}
                { (this.state.showBtn) ?
                    <button onClick={this.getNextPers}>Ver Mais</button>
                    :
                    null
                }
            </div>
        );
    }

Answer 2

第一件事getNextPers没有返回任何内容，你可以通过在代码中使用condintion来实现show / hide

{ this.your_condition ? 
    <button onClick={this.getNextPers}>Ver Mais</button> : ''
}

Answer 3

除了Ramya回答你也可以使用

render(){
        return (
            <div>
                <p><b>Personagens:</b></p>
                {this.state.personagens.map((pers, i) => (
                    <div key={i}>
                        <br />
                        <p><i>Name:</i> {pers.data.name}</p>
                        <p><i>Height:</i> {pers.data.height} cm</p>
                        <p><i>Mass:</i> {pers.data.mass} kg</p>
                    </div>
                ))}

                { this.state.showBtn && <button onClick={this.getNextPers}>Ver Mais</button> }
            </div>
        );
    }

Answer 4

真正的问题在于：

axios.get(peopleApiEndpoint).then((p) => {
    if (p == {}) { // THIS WILL NEWER WORK AS EXPECTED
        this.setState({showBtn: false});
    } else {
        this.setState({
            personagens: this.state.personagens.concat(p),
            page: this.state.page + 1
        });
    }
});

如果没有更多结果而不是空对象，swapi也会返回404，因此您需要按照文档中所述catch添加axios.get块axios.get(peopleApiEndpoint).then((p) => { this.setState({ personagens: this.state.personagens.concat(p), page: this.state.page + 1 }); }).catch((err) => { this.setState({showBtn: false}); }); < / p>

{(this.state.showBtn && <button onClick={this.getNextPers}>Ver Mais</button>)}

现在您可以使用条件渲染，如：

    const server = require('http').createServer();

    const io = require('socket.io')(3000, {
      path: '/test',
      serveClient: false,
      // below are engine.IO options
      pingInterval: 10000,
      pingTimeout: 5000,
      cookie: false
    });

如果api中没有更多信息，如何删除按钮

4 个答案: