Проблема появилась после того , как я подключил к своему React приложению Context.API. Она заключается в том, что компонента, которая должна появиться, её просто нету
// Вот файл провайдер
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import StoreContext from './StoreContext.js';
import reportWebVitals from './reportWebVitals';
import store from './redux/redux-store.js';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
let renderEntireTree = (state) => {
root.render(
<React.StrictMode>
<StoreContext.Provider value={store} >
<App state={state}/>
</StoreContext.Provider>
</React.StrictMode>
);
}
renderEntireTree(store.getState())
store.subscribe(() =>{
let state = store.getState()
renderEntireTree(state)
})
// Вот файл куда я передаю провайдер
import React from "react"
import {addPostActionCreator, updateNewPostActionCreator} from "../../../redux/store"
import Myposts from "./Myposts"
import StoreContext from "../../../StoreContext"
const MypostsСontainer = (props) => {
<StoreContext.Consumer>
{ (store) => {
let state = store.getState()
let addPost = () => {
store.dispatch(addPostActionCreator())
}
let onPostChange = (text) => {
let action = updateNewPostActionCreator(text)
store.dispatch(action);
}
console.log(state.profilePage)
return <Myposts profilePage={state.profilePage} post={state.state} postCount={state.postCount} updateNewPostActionCreator={onPostChange} addPost={addPost} />
}
}
</StoreContext.Consumer>
}
export default MypostsСontainer
// Вот компонента которая не появилась в на сайте
import React from "react"
import s from "./Myposts.module.css"
import {addPostActionCreator, updateNewPostActionCreator} from "../../../redux/store"
const Myposts = (props) => {
let dialogs = props.postCount.state.postCount.map( function f(p) {
return <Post likeCount={p.likeCount} commentCount={p.commentCount} repostCount={p.repostCount} url={p.url} dates="26 окт 2021"/>, <Post likeCount={p.likeCount} commentCount={p.commentCount} repostCount={p.repostCount} dates="11 дек 2021" url={p.url}/>
} )
let newPostElement = React.createRef();
let onAddPost = () => {
let text = newPostElement.current.value;
props.addPost()
}
let onPostChange = () => {
let text = newPostElement.current.value;
props.updateNewPostActionCreator(text)
}
return ( <>
<input onChange={onPostChange} value={props.profilePage} ref={newPostElement} placeholder="Расскажите о себе" type="text" />
<button onClick={onAddPost} >ADD</button>
<div>
<ul className={s.ulPost}>
<li className={s.ulPostList}>Все записи</li>
<li className={s.ulPostList}>Мои записи</li>
</ul>
</div>
{dialogs}
</>
)
}
const Post = (props) => {
debugger
return ( <div className={s.post}>
<div className={s.postUp}><img src="https://sun2-17.userapi.com/MsrHX0KFBW_pRbQoUhBQMQgpFbIvVmG4t-qVpw/FgGUDFIXwF0.jpg" alt="" />
<div className={s.linkDate}>
<a href="#">Кирилл Алексеев</a><br />
<a href="#" className={s.data}>{props.dates}</a>
</div>
</div>
<div className={s.postDown}>
<img className={s.postDownImg} src={props.url} alt="" />
<div className={s.reaction}>
<span><p>{props.likeCount}</p><img src="https://www.svgrepo.com/show/476608/like.svg" alt="like" /></span>
<span><p>{props.commentCount}</p><img src="https://www.svgrepo.com/show/349661/comment.svg" alt="comment" /></span>
<span><p>{props.repostCount}</p><img src="https://cdn-icons-png.flaticon.com/512/591/591866.png?ga=GA1.1.551766916.1695375018" alt="repost" /></span>
</div>
</div>
</div>
)
}
export default Myposts
Простой
