反応が（還元）状態変化に応答していませんか？

Question

（還元）状態が変更されたときに何らかの理由で反応が再描画されません。 1レベルネストされている可能性がありますか？また、レキシックスインスペクタでは、状態が正しく変更されていることがわかります。手動でページを更新すると、そのページが機能していることもわかります。しかし、私はなぜそれが自動的に再描画されないのか混乱しています。

簡体クラスコンポーネント

class Users extends Component { 
    render() { 
     const something = this.props.users.users; 

     return (
      <div> 
       <div className='MAIN_SECTION'> 
        <SearchBar handleChange={(value) => this.setState({searchQuery: value})} /> 

        <div className='LIST'> 
         {something.mapObject((user) => <div onClick={() => this.props.deleteUser(user.id)}>{user.name}</div>)} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     users: state.users 
    }; 
} 

export default connect(mapStateToProps, { deleteUser })(Users); 

アクションクリエーター

export function deleteUser(userhash) { 
    return function (dispatch, getState) { 
     return new Promise(resolve => setTimeout(resolve, 1000)).then(() => { 
      const data = { 
       status: 200, 
       data: { 
        status: 200 
       } 
      }; 

      if (data.status === 200) { 
       const newState = getState().users.users; 
       delete newState[userhash]; 

       dispatch({ 
        type: DELETE_USER, 
        payload: { 
         data: newState 
        } 
       }); 
      } 
     }); 
    }; 
} 

リデューサー

const INITIAL_STATE = { 
    isFetching: true, 
    users: {} 
}; 

case DELETE_USER: 
    return { 
     ...state, 
     users: action.payload.data 
    }; 

Answer 1

ます一度ディスパッチアクションDELETE_USER、

const something = this.props.users.users; 

が正しく表示されません。

これは実際には何かがthis.props.userであることを意味しています。

  const newState = getState().users.users; 
      delete newState[userhash]; 

      dispatch({ 
       type: DELETE_USER, 
       payload: { 
        data: newState 
       } 
      }); 

レンダリングでは、this.props.users自体がユーザーの配列です。

にmapStateToPropsを変え、汚い修正を持っている：コードは私には本当にジャイブない

const something = this.props.users; 

Answer 2

：レンダリングにおける

function mapStateToProps(state) { 
    return { 
    users: state.users.users || state.users 
    }; 
} 

変更。ある地点では、.map()をusers.usersに、別の地点でdelete[newHash]を使用しています。それは配列ですか、オブジェクトですか？

しかし、仮にそれがうまくいったとしましょう。あなたは状態が正しく変わったと言います。

のは、初期状態が

{ 
    isFetching: true, 
    users: { users: ['12345', '67890'] } 
} 

はアクションで、削除されます、我々は減速

で、イベント最後に

const newState = getState().users.users; // ['12345', '67890'] 
delete newState[userhash]; // ['67890'] if you use your imagination 

dispatch({ 
    type: DELETE_USER, 
    payload: { 
     data: newState // ['67890'] 
}) 

のこれらの配列を有する「12345」ユーザを言ってみましょうであると仮定しましょう

case DELETE_USER: 
return { 
    ...state, 
    users: action.payload.data // ['67890'] 
}; 

したがって、最終状態は

012です

{ 
    isFetching: true, 
    users: ['67890'] 
} 

元の状態と同じではありません。ユーザーはもはやusers.usersを持っていません。