React App Clickhandler Проблема с проверкой - PullRequest
Новая
       25

React App Clickhandler Проблема с проверкой

0 голосов
/ 26 мая 2019

Я пытаюсь получить данные с сервера json и проверить их по значению, введенному в поля ввода. Если извлеченные данные и входные данные совпадают, необходимо добавить div между полями и текстом описания. Я уже создал этот компонент, и я думаю, что все в порядке.

Я уже установил onChangeHandler, но OnClickHandler я не выполнил проверку между входами и связанными полями json. Может быть, мне нужно использовать цикл для проверки? 

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import styled from 'styled-components';
import ApplyButton from '../ApplyButton/ApplyButton';
import axios from 'axios';
import IsApplied from '../IsApplied/IsApplied';

const NumberContainer = styled.div`
    margin-top: 10px;
`;


export default class NumberBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            giftcards: [],
            first: '',
            second: '',
            isSeen: false
        };
        this.onClickHandler = this.onClickHandler.bind(this);
        this.onHandleChange = this.onHandleChange.bind(this);
    }

    onHandleChange (property) {
         return e => {

         this.setState({
            [property]: e.target.value 
        });
      };
    }

    async componentDidMount() {
        const response = await axios.get('http://localhost:3001/giftcards')
        const giftcards = response.data
        this.setState({giftcards: giftcards})   
    }

    onClickHandler() {

        if (this.state.first === this.state.giftcards.cardnumber && 
            this.state.second === this.state.giftcards.control) {
            return alert("correct") & this.setState({isSeen:true})
        } else if (this.state.first.length === 0 &&
             this.state.second.length === 0) {
            return alert("error")
        } else {
            return alert("enter correct number") & console.log(this.state.giftcards)
        }
    }

    render() {
        let resultsbox;            
        if (this.state.isSeen) {
            resultsbox = <IsApplied cardno={this.state.first}/>;
        } else {
            resultsbox = null;
        }

        return (
            <NumberContainer>
              {resultsbox}  
                <TextField
                style={{ margin: 8, width: 430 }}
                margin="normal"
                variant="outlined"
                type="search"
                label="Gift Card Number"
                value={this.state.first}
                name="cardNomber"
                onChange={this.onHandleChange('first')}

                />
                <TextField
                style={{ margin: 8, width: 200}}
                margin="normal"
                variant="outlined"
                type="search"
                label="Control Code"
                value={this.state.second}
                name="controlCoder"
                onChange={this.onHandleChange('second')}
                />

                <ApplyButton handle={this.onClickHandler}/>
            </NumberContainer>
        )
    }
}




{
    "giftcards": [
        {
            "cardnumber": "5078282848878291861",
            "control": "175"
        },
        {
            "cardnumber": "6435047555924007105",
            "control": "201"
        }

    ]
}

Я получаю неопределенное значение для this.state.giftcards.cardnumber & this.state.giftcards.control при проверке с console.log

1 Ответ

0 голосов
/ 26 мая 2019

this.setState({giftcards: giftcards}).

Вы устанавливаете giftcards значение состояния, равное объекту. Этот объект JSON имеет ключ подарочных карт. Таким образом, как минимум ваше состояние в onClickHandler должно быть примерно таким: 

if(this.state.first === this.state.giftcards.giftcards[index]){
....
}

Поскольку ключ подарочных карт имеет массив для своего значения, вы также должны решить, с каким элементом массива вы хотите его проверить, например this.state.giftcards.giftcards [0] .cardnumber ...

Тем не менее, звучит больше так, будто вы просто хотите отфильтровать некоторые данные, чтобы определить, ввел ли пользователь ту же самую информацию карты.

Мы можем использовать array.filter() для возврата любых подарочных карт, которые соответствуют вашим пользовательским данным. Если есть, то мы установим isSeen в true. Попробуйте сделать что-то подобное для onClickHandler(): 

onClickHandler(){
    const { giftcards, first, second } = this.state

    const matchingGiftCards = giftcards.filter((card) => {
        return card.cardnumber == first && card.control == second
    })

    //if there are any matching giftcards we will set isSeen to tru
    if(matchingGiftCards.length > 0){
        this.setState({isSeen:true})
    }
}
...