账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react组件中通过action更新了store中的数据,另一个组件中数据视图如何更新
    49
    0
    1. 页面上左边是一个输入框,右边是一个列表
    2. 左边输入一些东西,在右边列表展示
    3. 为什么为左边输入后,redux中store数据已经更新了,但是数据没有更新到右边的组件上:右边组件中没有立刻更新我修改出来的数据,该如何解决
    // 定义函数 将 redux中的store中存储的值通过props放入组件中。
    function mapStateToProps(state) {
      // 可以根据 state 中的数据,动态地输出组件需要的(最小)属性,例如这里:我们只需要拿到store中的notes即可。
      return {_list: state.notes}
    }
    // 映射redux action到组件中
    const mapDispatchToProps = (dispatch) => {
      return {
        _deleteNote: bindActionCreators(deleteNote, dispatch)
      }
    }
    export default connect(mapStateToProps, mapDispatchToProps)(List);
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 余生勿扰 普通会员 1楼

      在React中,当你通过Action组件更新store中的数据时,其他组件可以通过Redux或者Recharts等库的connect函数进行数据视图的更新。

      Redux是Google开发的一种状态管理库,它使用Redux Reducer来处理store中的数据。当action触发时,Redux Reducer会更新store中的数据,并通过actions.push()方法向组件的state中添加新的数据。

      Recharts是一个用于数据可视化库,它提供了一些工具来帮助你创建交互式的数据视图。Recharts的React Hooks API使得你可以在React组件中直接使用数据视图组件,而不需要在React组件的render方法中使用复杂的渲染逻辑。

      例如,你可以在你的action组件中使用Redux的actions.push()方法向state中添加新的数据:

      ```jsx import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers';

      const store = createStore(rootReducer, applyMiddleware(thunk));

      store.dispatch({ type: 'ADD_DATA', data: 'new data' }); ```

      然后在你的数据视图组件中,你可以使用Redux的connect函数将state和actions封装在一起:

      ```jsx import React from 'react'; import { connect } from 'react-redux';

      const DataView = ({ data, dispatch }) => (

      Data View

        {data.map((item) => (
      • {item.name}
      • ))}

      );

      export default connect( state => ({ data: state.data, addData: (data) => dispatch(addData(data)), }), )(DataView); ```

      在这个例子中,当用户点击"Add Data"按钮时,数据视图组件会被重新渲染,并且其state中的data和addData函数会被调用,从而更新数据视图。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部