Question

const INITIAL_STATE = {
  otherStates...,
  phase: " "
};

const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onStarting: () => {
      dispatch({type: 'STARTING'})
    }
  }
}
const ConnRootContainer = 
      connect(mapStateToProps, mapDispatchToProps)
      (RootContainer);

我在下面有一个switch语句，在一个案例中，我需要为阶段分配一些文本。

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case types.STARTING:
      let phase = " "

      if (state.stateOne < state.StateTwo) {
       count = growth(state, 0)
       phase = "START"
      }

      else if (CONDITION) {        
        phase = "PAUSE"
      }

      else {        
        phase = "STOP"
      }

      coordinates = generate(state.coordinates, variable);
      return {
        ...state,
        coordinates: coordinates,
        phase: phase
              }

    case types.OTHER_TYPE:
      OTHER CASE FILES
      }

    default:
      return state      
  }
}

相名称必须用作同一文件的另一个功能中的条件。

let generate = (data, otherData) => { 
   if({this.props.phase} === "START"){ 
  for (let i = 1; i < otherData; i++) {
    let newX = data[i - 1].x  + FORMULA;
    let newY = data[i - 1].y  + FORMULA;
    data.push({ x: newX, y: newY });
  }
}

if({this.props.phase} === "STOP"){
  while (data.length) {
    data.splice(data.length - 1, 1);
  }
}

return data; 
}

新错误是：这是一个保留字，因为没有将相位传递给该函数。如何改善代码并在if语句中使用 state.phase 进行验证？

Answer 1

基于与OP的对话，此代码发生在他的化简器中，因此下面的解决方案已更新以反映有效的解决方案，从而允许OP根据他的化简器内的action.type更新状态。

在减速器内部，无需使用Object.assign然后不对其执行任何操作，您可以使用destructuring assignment来将其设置为返回状态

关键更改如下：

let phase = '';

if (otherState1 < otherState2) phase = 'START';

return {
  ...state,
  phase
}

解决方案

const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

// Create RootContainer of App
class RootContainer extends React.Component {
  render () {
    return (
      <div>
        <button onClick={this.props.onStarting}>Set Phase to STARTING</button>
        <p>Phase: {this.props.phase}</p>
      </div>
    )
  }
}
// Functions for ReactRedux.connect
const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onStarting: () => {
      dispatch({type: 'STARTING'})
    }
  }
}
// Connect React Component to Redux
const ConnRootContainer = 
      connect(mapStateToProps, mapDispatchToProps)
      (RootContainer);

// Setup Initial State
const INITIAL_STATE = {
  otherState1: 1,
  otherState2: 2,
  phase: 'NOT SET'
};

// Define Reducer
function myReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'STARTING':
      const { otherState1, otherState2 } = state;
      let phase = '';

      if (otherState1 < otherState2) phase = 'START';

      return {
        ...state,
        phase
      }
  }

  return state
}

// Connect reducer to Redux
const store = createStore(myReducer);

// Pass store to ReactRedux.Provider
class App extends React.Component {
  render () {
    return (
      <Provider store={store}>
        <ConnRootContainer />
      </Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.min.js"></script>
<div id="root"></div>

~~我不确定Object.assign会为您完成什么。在您的一个函数中，您将返回一个对象，但在另一个函数中，您正在尝试从状态访问属性。~~

~~我建议您将stage保存到状态，以便以后可以从那里访问它。这是一个解决方案：~~

注意：在第二个功能中，即使您说要访问state.phase，也要尝试访问state.stage

原始解决方案

<罢工>

class App extends React.Component { constructor(props){ super(props); this.state = { otherState1: 1, otherState2: 2 } this.getState = this.getState.bind(this); this.doSomething = this.doSomething.bind(this); } getState() { const { otherState1, otherState2 } = this.state; if (otherState1 < otherState2) { this.setState({stage : "START"}) } } doSomething(data, otherData) { const { stage } = this.state; if (stage === "START"){ console.log('phase is START'); } if (stage === "STOP"){ console.log('phase is STOP'); } } render() { return ( <div> <button onClick={this.getState}> Get State </button> <p>{JSON.stringify(this.state)}</p> <button onClick={this.doSomething}> Do Something </button> </div> ); } } ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

好吧（假设您无法返回它，并且这两个函数的文件相同），只需在它们的常用词法范围内声明一个变量：

let object;

function A() {
   object = someValue
}

A()

function B(obj) {
   console.log(obj)
}

B(object)

当然，您应该确保B()在之后执行 A()

您总是可以对此进行过度设计，但是目前我看不出有什么理由使事情变得更复杂。

如何导出object.assign并将其内容用于同一文件的另一个功能中的验证？

2 个答案:

解决方案

原始解决方案