时间戳

首页 > 解决方案 > if else 语句在反应组件中不起作用

reactjs - if else 语句在反应组件中不起作用

问题描述

我正在尝试在我的反应组件中实现一个条件。当用户触发 onClick 时，状态会更新 allStakes，创建一个包含 4 个值的数组。问题是我不希望用户输入超过 4 个值，因此尝试通过执行 if else 语句来给出限制。我试图在两个语句中添加一个 console.log。奇怪的事实是 setState 得到更新，但 csonole.log 从未显示。即使数组长于 4，组件也会不断呈现我插入的所有值。谢谢进步

import React, { Component } from 'react';
import Stake from './stake';

class FetchRandomBet extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            bet: null,
            value: this.props.value,
            allStakes: []
        };
    }

    async componentDidMount() {
        const url = "http://localhost:4000/";
        const response = await fetch(url);
        const data = await response.json();

        this.setState({
            loading: false,
            bet: data.bets,
        });
    }

    render() {
        const { valueProp: value } = this.props;
        const { bet, loading } = this.state;
        const { allStakes } = this.state;

        if (loading) {
            return <div>loading..</div>;
        }
        if (!bet) {
            return <div>did not get data</div>;
        }
        return (
            < div >
                {
                    loading || !bet ? (
                        <div>loading..</div>
                    ) : value === 0 ? (
                        <div className="bet-list">
                            <ol>
                                <p>NAME</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.name}
                                        </li>
                                    ))
                                }
                            </ol>
                            <ul>
                                <p>ODDS</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.odds[4].oddsDecimal}
                                            <div className="stake-margin">
                                                <Stake
                                                    onClick={(newStake) => {
                                                        if (allStakes.length <= 3) {
                                                            this.setState({ allStakes: [allStakes, ...newStake] })
                                                            console.log('stop')
                                                        } else if (allStakes.length == 4) {
                                                            console.log('more than 3')
                                                        }
                                                    }}
                                                />
                                            </div>
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>

标签： reactjs

解决方案

可能是由于不正确的数组解构而发生的。尝试更改此代码：

  this.setState({ allStakes: [allStakes, ...newStake] })

由下一个：

 this.setState({ allStakes: [newStake, ...allStakes] })

推荐阅读