React->为什么我的React无法显示未刷新状态的更改？

编程问答 2022-06-05

问题描述

我有一个react应用，该应用将向您显示状态的长度，或者更像其中的项目，事情是的，但它不是实时执行的，它只是向您显示状态的更新长度刷新后，有我的家，商店和减速器文件。我的问题是如何解决该问题，为什么发生，是什么原因以及它在哪里发生？

减速器：

import React from 'react'
const reducers=(state={posts:[{}]},action)=>{
    switch(action.type){
        case 'post':
            return{
                ...state,posts: [...state.posts,{content: action.content}]
            }
        default:
            return state
    }
}
export default reducers

商店：

import {createStore,applyMiddleware} from 'redux'
import { persistStore,persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 

import rootReducer from './reducers'

import logger from 'redux-logger'
const persistConfig = {
  key: 'root',storage,}

const persistedReducer = persistReducer(persistConfig,rootReducer)
export const store = createStore(persistedReducer,applyMiddleware(logger))
export const persistor = persistStore(store)

首页：

import React,{ Component} from 'react'
import {FaHome,FaBell,FaHashtag,FaUser,FaSearch,FaFeatherAlt} from 'react-icons/fa'
import {aifillMessage} from 'react-icons/ai'
import {mdsettings} from 'react-icons/md'
import {connect} from 'react-redux'
import {store} from '/Web Dev Projects/React/Amazon Clone/amazonclone/src/store'
import {Navbar,Nav,NavbarBrand,NavItem,FormControl,Button} from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import './css/Home.css'
import $ from 'jquery'

class Home extends Component {
    render() {
        const {posts} = this.props;
        const post=()=>{
            store.dispatch({type:'post',content: 'test post'})
        }
        return (
            <div>
                <Navbar bg='white' vraiant='dark'>
                   <NavItem>
                       <span className='homeLink'><FaHome size={25}></FaHome> Home</span>
                       <span className='homeLink'><FaBell size={25}></FaBell> Notifications</span>
                       <span className='homeLink'><FaHashtag size={25}></FaHashtag> discover</span>
                       <span className='homeLink'><FaUser size={25}></FaUser> Me</span>
                       <span className='messageNotification'><aifillMessage size={25}></aifillMessage></span>
                       <span className='settingsButton'><mdsettings size={25}></mdsettings></span>
                       <span className='postButton'><FaFeatherAlt size={25}></FaFeatherAlt></span>


                   </NavItem>
                </Navbar>
                <div className='posts'>
                    <div className='postsHeader'>
                        <p>Posts</p>
                    </div>
                    <div>
                        <FormControl className='makePostField'placeholder='make a post'></FormControl>
                        <Button onClick={()=>post().val())}>Post</Button>
                        {posts.length}
                        {posts.map(post=><div>{post.content}</div>)}
                    </div>
                </div>
            </div>
        )
    }
}
const mapStatetoProps=(state={posts:[{}]})=>{
    return{
        posts: state.posts
    }
}
export default connect(mapStatetoProps)(Home);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjsreduxreduxreduxreduxredux-persist