У меня небольшое (никогда не для производства) приложение Express / React, я проверяю хешированный пин-код в экспрессе и возвращаю либо message: false, если проверка не пройдена, либо message: <cardnumber>, если проверка прошла успешно. В моем интерфейсе реакции я хочу в конечном итоге перенаправить, если он возвращает номер карты, но сначала я просто пытаюсь условно отобразить компонент.
У меня есть конструктор для ответа json
constructor() {
super();
this.state = {
cardnumber: '',
pin: '',
servercardnumber: {
message: ''
}
};
Затем я получаю данные из API следующим образом
const url = '/api/login';
const serverResponse = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true
},
body: JSON.stringify(data)
});
const json = await serverResponse.json();
console.log(json);
this.setState(
prevState => {
return {
servercardnumber: json.cardnumber
};
},
() => {
console.log(this.state.cardnumber);
}
);
};
Затем я пытаюсь условно визуализировать компонент пользовательского интерфейса в моем ответном ответе
render() {
const { cardnumber, pin, servercardnumber } = this.state;
return (
<React.Fragment>
<Card>{!servercardnumber ? <Card> Server says no</Card> : null}</Card>
{console.log('server says:')}
{console.log(servercardnumber)}
{console.log(servercardnumber)} сначала возвращает правильный номер карты сервера, а затем возвращает неопределенное значение.
Мне нужно увидеть ответ в моем условном рендеринге и показать визуализированный компонент, если вход выполнен успешно (или показать, если не успешно, если я получу его для условного рендеринга)
Я сделал несколько изменений в этом коде, пытаясь заставить его работать, поэтому он может показаться немного загроможденным.
Полный код переднего конца для соответствующего файла: https://pastebin.com/VbdzmE4E
Код сервера для соответствующего файла: https://pastebin.com/TZ35NZxa