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 BUT尝试过此操作，我将面临如何在分派函数中传递该状态的麻烦？谁能帮我解决这个问题？

Answer 1

简短答案：

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

长答案：

根据定义，组件状态表示组件工作所需的内部数据。它无意与其他组件共享（子组件除外：您可以将状态变量作为子组件的prop传递）。

如果要在不同的，不相关的组件之间共享数据，则基本上有两个选择：

您将数据放在更高的位置。这就是Redux的方法。
您在组件上创建事件处理程序，以触发该组件外部的事件，这将负责在需要发送数据的任何地方分派数据。

这是您的代码作为起点的选项2的样子：

df = df.append(newline)

Answer 2

您在错误的地方调用了调度功能。请在您要更新状态的情况下调用调度，在选定的函数中调用调度，因为您要在那里更新要发送给reducer的状态...您将看起来像这样

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);

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

2 个答案: