Я новичок в веб-разработке и пытаюсь научиться реагировать и сокращать.
Я следую этому уроку https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK
Как я пытаюсь расширить то, что я узнал,
Я пытаюсь перечислить всех пользователей (кликабельных), после нажатия отобразятся (развернуть / свернуть) все сообщения выбранного пользователя (кликабельные снова), после нажатия на сообщение, отобразит (развернет / свернет) все комментарии к выбранной записи
API для использования:
Прямо сейчас я смог составить список всех пользователей и сделать возможность развернуть / свернуть, а также отобразить сообщение пользователя, однако, я испытываю проблема ниже:
Если я нажму на пользователя [0], он развернется и отобразит сообщение пользователя [0] ( OK ).
, тогда, если я нажму на пользователя [1], развернет и отобразит пост пользователя [ 1] ( OK )
, однако, по щелчку пользователя [1] он также меняет запись, указанную для пользователя [0], чтобы отобразить также запись пользователя [1] ( НЕ ОК )
вот мой UserContainer.js
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchUsers, updateUser } from "../redux";
import PostsContainer from "./PostsContainer";
function UsersContainer({ userData, fetchUsers, updateUser }) {
useEffect(() => {
fetchUsers();
}, []);
const handleClick = event => {
//console.log(userData.users)
const indx = userData.users.findIndex(obj => obj.id == event.target.value);
//console.log(indx)
userData.users[indx].collapse = !userData.users[indx].collapse;
//console.log(userData.users[indx].collapse + " " + indx);
updateUser(userData);
};
return userData.loading ? (
<h2>loading</h2>
) : userData.error ? (
<h2>{userData.error}</h2>
) : (
<div>
<h2>User List</h2>
<div className="list-group">
{userData.users.map(user => (
<div>
<button
type="button"
className="list-group-item list-group-item-action"
key={user.id}
onClick={handleClick}
value={user.id}
>
{user.name}
</button>
{/* for update to change SampleContainer component to POST component */}
{!user.collapse && (
//<SampleContainer id={user.id} name={user.name} />
<PostsContainer id={user.id} />
)}
</div>
))}
</div>
</div>
);
}
const mapStateToProps = state => {
return {
userData: state.user
};
};
const mapDispatchToProps = dispatch => {
return {
fetchUsers: () => dispatch(fetchUsers()),
updateUser: users => dispatch(updateUser(users))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UsersContainer);
Я не знаю, почему stackoverflow находит, что мой пост имеет код, который неправильно отформатирован, поэтому я не Невозможно установить компонент PostContainer.
Вот ссылка для кодов и ящиков для полной ссылки на код: https://codesandbox.io/s/react-redux-testing-mi6ms