组件未更新（react-redux）

Question

我是另一个有同样问题的人； 抱歉，我还看不到我的错误。我怀疑是某种与突变有关的东西，但是我（几乎）尝试了一切，发了疯。 当我向商店添加商品时，我的组件没有更新，似乎只是一次渲染（第一次）

我正在尝试生命周期，但一无所获

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;

Answer 1

您正在执行的是一种反模式，使用props到setState，尽管您可以直接使用props。

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

编辑：

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

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;