Question

我正在编写一个计算器应用程序作为FreeCodeCamp的项目。我决定使用React和Redux编写它。我已经编写了应用程序的Redux部分，并开始将Redux连接到React。

当我编写了将Redux连接到我的React应用程序的所有代码时，渲染停止工作。我使用了不同的console.log（）语句来跟踪JavaScript阻塞的位置，然后将其范围缩小到链接的Codepen的第241行上的connect语句。如果您注释掉第242行，并用替换第255行 ReactDOM.render(<Calculator/>, wrapper); 该应用程序呈现。但是，在FreeCodeCamp平台上运行的相同代码似乎可以正常工作。

这是我的CodePen的链接：JavaScript Calculator。

我在FreeCodeCamp上用于测试代码的挑战可以在这里找到：FCC Challenge

下面是我从FCC改编的确切代码（以使编辑器呈现我的组件）。您可以看到我用笔进行的更改仅在代码的呈现部分中。

const wrapper = document.querySelector("#wrapper");

// REDUX
const initialState = {
  operation: "",
  lastResult: "",
  operand: "",
  lastInput: "",
  display: "0"
}
const operators = ["+", "-", "*", "/"];
const ADD_DIGIT = "ADD_DIGIT";
const ADD_OPERATOR = "ADD_OPERATOR";
const ADD_DECIMAL = "ADD_DECIMAL";
const CLEAR = "CLEAR";
const EVALUATE = "EVALUATE";
const { createStore } = "Redux";

function reducer(state = initialState, action) {
  let newState;
  switch (action.type) {
    case ADD_DIGIT:
      // Number can't begin with multiple zeros, leave state the way it is
      if (state.lastInput === "0" && action.value === "0") {
        newState = state;
      // If last operation was =, start new operation
      } else if (state.lastInput === "=") {
        let newOperation = "" + action.value;
        newState = {
          operation: "",
          lastResult: state.lastResult,
          operand: newOperation,
          lastInput: action.value,
          display: newOperation
        }
      // If previous input was an operator, add operator to operation, reset display and start adding digits
      } else if (operators.indexOf(state.lastInput) > -1) {
        let newOperation = "" + action.value;
        newState = {
          operation: state.operation += state.lastInput,
          lastResult: state.lastResult,
          operand: newOperation,
          lastInput: action.value,
          display: newOperation
        }
      // Else, add digit to the current operand and display value
      } else {
        /* Append digit to operand, add to lastInput */
        /* Add digit to display */
        newState = {
          operation: state.operation,
          lastResult: state.lastResult,
          operand: state.operand + action.value,
          lastInput: action.value,
          display: state.display + action.value
        }
      }
      break;

    case ADD_OPERATOR:
      // Operation can't begin with operator unless previous operation was =
      if (state.operation === "") {
        if (state.lastInput === action.value) {
          newState = {
            operation: state.operation,
            lastResult: state.lastResult,
            operand: state.lastResult + "" + action.value,
            lastInput: action.value,
            display: state.lastResult + "" + action.value
          }
        } else {
          newState = state;
        }
      // If 2 or more operators are entered consecutively, use the most recently entered
      } else if (operators.indexOf(state.lastInput) > -1) {
        newState = {
          operation: state.operation,
          lastResult: state.lastResult,
          operand: "",
          lastInput: action.value,
          display: action.value
        }
      // Input should be handled normally for operator
      } else {
        /* Add current operand to operation */
        /* Set valid operator to lastInput */
        /* Add operator to display */
        newState = {
          operation: state.operation + state.operand,
          lastResult: state.lastResult,
          operand: "",
          lastInput: action.value,
          display: action.value
        }
      }
      break;

    case ADD_DECIMAL:
      // If used to begin a number, prepend a 0
      if (state.operand === "") {
        let newOperation = "0" + action.value;
        newState = {
          operation: state.operation,
          lastResult: state.lastResult,
          operand: newOperation,
          lastInput: action.value,
          display: newOperation
        }
      // No two decimals in one number
      } else if (state.operand.split("").indexOf(action.value) > -1 || state.lastInput === action.value) {
        newState = state;
      } else {
        /* Append decimal to lastInput, operand */
        /* Add decimal to display */
        newState = {
          operation: state.operation,
          lastResult: state.lastResult,
          operand: state.operand + action.value,
          lastInput: action.value,
          display: state.display + action.value
        }
      }
      break;   

    case EVALUATE:
      // Operation can't end with an operator
      // If input is only one operand, return that
      // Otherwise each operator must include two operands    
      if (operators.indexOf(state.lastInput) < 0) {
        /* Evalue the result of operand (Using eval() ) */
        /* Add result to display */
        /* Store result in lastResult, clear other state props */
        let result = eval(state.operation);
        newState = {
          operation: "",
          lastResult: result,
          operand: "",
          lastInput: action.value,
          display: result
        }
      }
      break;

    case CLEAR:
      /* Clear state, input, and display */
      newState = initialState;
      break;

    default:
      newState = state;
      break;
  }

  return newState;
}

function addDigit(digit) {
  let action = {
    type: ADD_DIGIT,
    value: digit
  }
  return action;
}
function addOperator(operator) {
  let action = {
    type: ADD_OPERATOR,
    value: operator
  }
  return action;
}
function addDecimal() {
  let action = {
    type: ADD_DECIMAL,
    value: "."
  }
  return action;
}
function evaluate() {
  let action = {
    type: EVALUATE,
    value: "="
  }
  return action;
}
function clear() {
  let action = {
    type: CLEAR,
    value: ""
  }
  return action;
}

const store = Redux.createStore(reducer);



// REACT-REDUX
const mapStateToProps = function(state) {
  console.log("map state to props");
  return {
    display: state.display
  }
}
const mapDispatchToProps = function(dispatch) {
  console.log("map dispatch to props");
  return {
    calcAddDigit: function(digit) {
      dispatch(addDigit(digit));
    },
    calcAddOperator: function(operator) {
      dispatch(addOperator(operator));
    },
    calcAddDecimal: function() {
      dispatch(addDecimal());
    },
    calcEvaluate: function() {
      dispatch(evaluate());
    },
    calcClear: function() {
      dispatch(clear());
    }
  }
}
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;



// REACT
class Calculator extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <h1>Functioning</h1>
    )
  }
}

console.log("before connect statement - line 241");
Calculator = connect(mapStateToProps, mapDispatchToProps)(Calculator);
console.log("after connect statement");

class CalculatorApp extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={store}>
        <Calculator/>
      </Provider>
    );
  }
}

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Calculator/>
      </Provider>
    );
  }
};

Answer 1

因为导入外部脚本的顺序很重要。将there is no rule to build target ****.o放在program_name := librlsmatt.a source_dirs := ../src include_dirs := $(source_dirs) CXX = g++ AR = ar WARNS := -Wall -Wno-deprecated -Wno-unused -Wno-unused-parameter CFLAGS:= $(addprefix -I, $(include_dirs)) $(WARNS) -fstack-protector-all -g ARFLAGS := cru source_files := $(wildcard $(addsuffix /*.cpp, $(source_dirs) ) ) object_files := $(notdir $(source_files:.cpp=.o) ) dep_files := $(object_files:%.o=%.d) .PHONY : clean -include $(dep_files) $(program_name): $(object_files) $(info Linking ...) @$(AR) $(ARFLAGS) $@ $(object_files) %.o: %.cpp makefile $(info Compiling $< ...) @$(CXX) -c $(CFLAGS) $< -o $@ -MF $(@:%.o=%.d) -MT $@ clean: $(info Clean $(program_name)...) @$(RM) -f $(program_name) $(object_files) $(dep_files)之下，因为redux要求react出现在全局范围内。

正确的顺序是：

反应
react-dom
redux
react-redux

为什么我的ReactRedux.connect语句不起作用？

1 个答案: