如何在另一个组件中使用一个组件的状态？独立组件（React）

Question

当用户从下拉复选框中选中任何选项时，我在下拉组件中使用复选框菜单，然后状态更新，现在工作正常我想将该状态用于我的其他组件我该怎么做我知道 redux 用于兄弟姐妹之间的交流，但我遇到了麻烦 这是我的下拉代码

import { connect } from "react-redux";
const options1 = [
  {label: 'One', value: 1},
  {label: 'Two', value: 2},
  {label: 'Three', value: 3},
];
class _Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: [],
    };
    this.selected = this.selected.bind(this);
  }
  selected = (selected) => {
    // selectedFruits is array of { label, value }
    this.setState({selected}, () => {
      sessionStorage.setItem(
        recent_slected_user_accountsid + 'selected zones_ID',
        this.state.selected,
      );
      sessionStorage.setItem('zoneflag', 1);
    });
  };
  render() {
    return (
      <div>
        <MultiSelect
          onSelectedChanged={this.selected}
          options={options}
          selected={this.state.selected}
        />
      </div>
    );
  }
}
const mapStateToProps = state => {
    return {
      age: state.age
    };
  };
  const mapDispachToProps = dispatch => {
    return {
      onAgeUp: () => dispatch({ type: "AGE_UP", value: new _Dropdown().state.selected}), 
// how can i pass selected state to this dispatch function because i am trying to use state outside a component
      onAgeDown: () => dispatch({ type: "AGE_DOWN", value: "raza"})
    };
  };
// export default _Dropdown
export default connect(
    mapStateToProps,
    mapDispachToProps
  )(_Dropdown);

这是我的 reducer.js

const initialState = {
  age: "raza"
};
const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "AGE_UP":
      newState.age = action.value;
      break;
    case "AGE_DOWN":
      newState.age = action.value;
      break;
  }
  return newState;
};
export default reducer;

这是我的 index.js

import '@babel/polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from '../app/routes/Meep/store/reducer';
const store = createStore(reducer);
render(
<Provider store={store}><App /></Provider>,
    document.querySelector('#root')
);

现在我想在我的其他组件中使用该选定状态，我该怎么做？如果已经通过使用 react Redux 进行了尝试，但是我遇到了麻烦如何在调度函数中传递该状态？谁能帮我解决这个问题？

Answer 1

你在错误的地方调用了 dispatch 函数。请在您想要更新状态的情况下调用调度，因为您正在更新您想要发送到减速器的状态......您将看起来像这样

import { connect } from "react-redux";
const options1 = [
  {label: 'One', value: 1},
  {label: 'Two', value: 2},
  {label: 'Three', value: 3},
];
class _Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: [],
    };
    this.selected = this.selected.bind(this);
  }
  selected = (selected) => {
    // selectedFruits is array of { label, value }
    this.setState({selected}, () => {
     
 this.props.dispatch({type: "AGE_UP", value:this.state.selected})
 sessionStorage.setItem(
        recent_slected_user_accountsid + 'selected zones_ID',
        this.state.selected,
      );
      sessionStorage.setItem('zoneflag', 1);
    });
  };
  render() {
    return (
      <div>
        <MultiSelect
          onSelectedChanged={this.selected}
          options={options}
          selected={this.state.selected}
        />
      </div>
    );
  }
}
const mapStateToProps = state => {
    return {
      age: state.age
    };
  };

// export default _Dropdown
export default connect(
    mapStateToProps,

  )(_Dropdown);

如果你想在其他类中使用该状态，你可以像这样轻松地做到这一点

import { connect } from "react-redux";
class App extends React.Component {
render(){
return(<div>
your age : {this.props.age}

</div>)
}
}
const mapStateToProps = state => {
    return {
      age: state.age,
    
    };
  };

export default connect(
    mapStateToProps,
  
  )(App);

Answer 2

简答：

您不能在另一个组件中使用组件的状态，除非另一个组件是直接子组件。您需要使用不同的方法来共享数据（例如 Redux）。

---

长答案：

根据定义，组件状态表示组件工作所需的内部数据。它不打算在其他组件之间共享（除了它的子组件：您可以将状态变量作为子组件的 prop 传递）。

如果您想在不同的、不相关的组件之间共享数据，您基本上有两种选择：

1. 您将数据放在其他地方，在上层。这就是 Redux 方法。
2. 您在组件上创建事件处理程序以触发组件外部的某些内容，该处理程序负责将数据分派到需要发送的任何地方。

以下是以您的代码为起点的选项 2：

class _Dropdown extends React.Component {
    // _Dropdown takes in a new prop: onSelectionChanged
    constructor(props) {
        /* Same as yours */
    }
    
    selected = (selected) => {
        // selectedFruits is array of { label, value }
        this.setState({selected}, () => {
            sessionStorage.setItem(recent_slected_user_accountsid + 'selected zones_ID', this.state.selected)
            sessionStorage.setItem('zoneflag', 1)
        })
    
        // Add this
        if (this.onSelectionChanged) {
            this.onSelectionChanged(selected);
        }
    }
    
    render() {
        /* Same as yours */
    }
}