Can't logged in after fetching data with redux - reactjs

Question

So, I (finally) can fetching data from jsonplaceholder using redux only. The problem is, my login won't let me logged in, saying "user not found". Before using redux, it works well. Please take a minute to see my code (and help me):
body.js
import React, {Component} from "react";
import "./style.css";
import { Switch, Route } from "react-router-dom"
import {About, Login, Register} from "../../pages"
import { connect } from "react-redux";
class Body extends Component {
constructor(props) {
super(props);
this.state = {
userData: [],
admin: [{
name: "admin",
role: "adm",
email: "adm#adm.com",
username: "admin",
password: "123"
}]
}
}
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
const dataUser = data.map(user =>({
...user,
password: "pass",
role: "user",
}));
this.props.doFetch({
userData: [...this.state.admin, ...dataUser]
})
})
}
showPage = () => {
return (
<Switch>
<Route path="/about" children={(props) => <About {...props} listUsers={this.state.userData} />} />
<Route path="/login">
<Login />
</Route>
<Route path="/register">
<Register listUsers={this.state.userData} tambahUser={this.addUsers} />
</Route>
</Switch>
)
}
render() {
return (
<>
{
this.showPage()
}
</>
);
}
}
const mapStateToProps = (state) => ({
userList: state.data.userData
})
const mapDispatchToProps = (dispatch) => ({
doFetch: (userData) => dispatch({ type: "FETCH", payload: userData })
})
export default connect(mapStateToProps, mapDispatchToProps)(Body);
login.js
import React, { Component } from 'react';
import { RowInput, Button } from '../../components';
import { connect } from "react-redux";
import { Redirect } from "react-router-dom"
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
}
}
onChangeInput = e => {
this.setState({
[e.target.name]: e.target.value
})
}
onLogin = async () => {
const { username, password } = this.state
const exist = this.props.userList.find(user => user.username === username && user.password === password)
if (exist) {
alert(`Welcome ${username}`)
this.props.doLogin(username, password)
} else alert("User not found.")
}
render() {
if (this.props.statusLogin){
return <Redirect to="/about" />
}
return (
<div className="login">
<form className="login-form" method="POST">
<div className="container-log">
<h1 className="judul">Login</h1>
<RowInput value={this.state.username} label="Username" placeholder="Username" type="text" name="username" onChange={this.onChangeInput}/>
<RowInput value={this.state.password} label="Password" placeholder="Password" type="password" name="password" onChange={this.onChangeInput}/>
<Button onClickInput={this.onLogin}>Masuk</Button>
</div>
</form>
</div>
);
}
}
const mapStateToProps = (state) => ({
statusLogin: state.auth.isLoggedIn,
usernameLogin: state.auth.username,
userList: state.data.userData
})
const mapDispatchToProps = (dispatch) => ({
doLogin: (users) => dispatch({ type: "LOGIN", payload: {username: users} })
})
export default connect(mapStateToProps, mapDispatchToProps)(Login)
getdata.js
const initialState = {
userData: []
}
const dataReducer = (state = initialState, action) => {
console.log("state: ", state);
console.log("action: ", action);
switch (action.type) {
case "FETCH":
return {
userData: [action.payload.userData]
}
default:
return state
}
}
export default dataReducer
Console log:
The array has been stored................right?
I'm seriously have no idea why my login not work? Is there something on my code that make it not work? Thank you before!

Answer 1

So, after three hours searching and trying, I only need to comment/delete function mapStateToProps in body.js. I assume it's because I'm calling and store data at the same time? Idk for sure either, so, if anyone know the exactly why, feel free to correct me. Thankies. Have a good day, everyone!