Question

当我使用setState进行交易时，它会旋转两次。首先返回数据失败，然后返回数据就绪。控制台首先返回false，然后返回true。我只想在控制台中返回true。

config.action_cable.url = "ws://localhost:3000/cable"

示例： https://codesandbox.io/s/kopz8wrl7o

Answer 1

这是由于React的生命周期以及您将state.loading属性最初设置为false的事实。 https://reactjs.org/docs/react-component.html

首先有一个初始渲染，然后调用具有setState的componentDidMount。您可能要保留未定义的加载，然后在render方法中检查其定义是否已定义，然后再检查其值。

Answer 2

您只需反转与加载相关联的布尔值。您应该首先将其设置为true，然后在加载数据时设置为false。

工作示例：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            error: false,
            data: []
        };
    }
    componentDidMount() {
        fetch("https://reqres.in/api/users?page=2")
            .then(res => res.json())
            .then(result => {
                this.setState({
                    data: result.data,
                    loading: false
                });
            })
            .catch(error =>{
                this.setState({ error: true });
            });
    }
    render() {
        const { loading, error } = this.state;
        !loading && console.log(true)

        return <div>{!loading && <div>Data Ready </div>}
          {error && <div>Data Error :( </div>}
        </div>;
    }
}
    
ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>
<div id='root'/>

Answer 3

您的数据更改，这就是为什么您有两条消息：

您需要做出决定，您打算做什么？如果您不想更改状态，可以使用shouldComponentUpdate，也可以只跳过1条控制台消息

反应setState两次呈现状态

3 个答案: