Javascript 组件未更新（react redux）

我是另一个有同样问题的人；对不起，我还看不出我的错误。我怀疑是基因突变引起的，但我几乎什么都试过了，很生气。当我向我的商店添加东西时，我的组件没有更新，它似乎只是第一次渲染

我尝试过生命周期，但什么都没有

ACTION


export default async function getJoke() {
    let jk = await axios.get('https://jokeapi.p.rapidapi.com/category/any' ,{ headers :{
        'x-rapidapi-host' :  'jokeapi.p.rapidapi.com',
        'x-rapidapi-key'  : "***********************" }} );

    let joke;
    if(jk.data.type === 'single') {
        joke = jk.data.joke 
    }  else {
        joke = { setup : jk.data.setup,
                 delivery : jk.data.delivery}
    }

   let getjoke = {
       type : 'GETJOKE',
       joke
   } 
   store.dispatch(getjoke) ;   
}


REDUCER

let initialState = { jokes : [ ] };

function joke (state = initialState, action) {
    switch (action.type) {
        case 'GETJOKE' : return {...state,
             jokes :[...state.jokes, {jokes: action.joke}]
             } ;
        default : return state;
    }
}
export default joke;

REDUCER-INDEX

import { combineReducers } from 'redux';
import joke from './joke'

export default combineReducers ({
    joke 

})

STORE 

import { createStore } from 'redux';
import Combined from './reducer';
export default createStore(Combined);


COMPONENT

import React from 'react';
import BotJoke from './btnJoke';
import {connect} from 'react-redux';
import store from '../store'

 class joke extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             jokes : props.jokes
         }
         console.log('MENDA',this.state.jokes);

     }
     componentDidMount() {
         console.log('willdisssd receive props');
/*          this.setState({jokes : [...this.state.jokes, nextProps]})
 */
     }

     componentWillMount(){
         console.log('will mount',this.state.jokes);
         console.log('Entra');
         console.log('NEXT PROPS');


     }

   render() {
   return (
       <div>
           <BotJoke/>
           { this.state.jokes !== undefined  ? <h1>Hay bromas</h1>: <h1>NO HAY BROMAS</h1> } 
       </div>
   )
 } }


function mapStateToProps (state) {
    console.log('STorE', store.getState());
    return {
        jokes : state.jokes
    }

}

let connection = connect(mapStateToProps)(joke);
export default connection;

---

你所做的是一个反模式，使用道具来设置状态，尽管你可以直接使用道具

在组件中的任何地方都使用this.props.croples，它应该可以工作。让我知道

编辑：

假设您希望笑话是一个数组：

REDUCER

let initialState = { jokes : [ ] };

function joke (state = initialState, action) {
    switch (action.type) {
        case 'GETJOKE' : return {...state,
             jokes :[...state.jokes, action.joke]
             } ;
        default : return state;
    }
}
export default joke;

REDUCER-INDEX

import { combineReducers } from 'redux';
import joke from './joke'

export default combineReducers ({
    joke 

})

STORE 

import { createStore } from 'redux';
import Combined from './reducer';
export default createStore(Combined);


COMPONENT

import React from 'react';
import BotJoke from './btnJoke';
import {connect} from 'react-redux';
import store from '../store'

 const joke = (props) => {

   const length = props.jokes.length

   return (
       <div>
           <BotJoke/>
           { length !== 0  ? <h1>{JSON.stringify(props.jokes[length-1])}</h1>: <h1>NO HAY BROMAS</h1> } 
       </div>
   )
 }



function mapStateToProps (state) {
    console.log('STorE', store.getState());
    return {
        jokes : state.jokes
    }

}

let connection = connect(mapStateToProps)(joke);
export default connection;

---

是的，我一开始使用函数作为组件，带有道具。笑话，但我得到了相同的，不更新…笑话应该是数组吗？还是对象？请查看更新的解决方案。让我知道这是否有效，如果您需要更多帮助，请将代码添加到codesandbox并共享链接。我尝试了你的代码，但编译时出错，因为props.joke在第一次尝试时没有定义。所以我对你的做了一点修改，添加了一个if语句，这让我回到了开头：我的商店看起来像这样{笑话：{笑话：[{..}，{..}，{..}，{..}]}；您可以在中看到整个代码；感谢您已经开始工作，问题出现在mapStatetoProps=>state.笑话.笑话上。这是一个层次结构问题。我想你需要开玩笑了：state.joke.jobs。此处缺少已添加到组合减速器中的减速器层次结构。仅供参考，如果你只有1个减量，你不需要合并你是对的！！！非常感谢你；我希望您能多解释一点，或者提供一些关于层次结构的参考，因为我不太了解它。好的，您可以在这里准备更多关于合并器的信息。在较高的级别上，当您将reducer直接用于store时，您可以从redux状态直接访问它们，但是combineReducer将在父对象中创建子层次结构，并将所有结果放在其中。