这个箭头函数在我通过 Redux 传递它的特殊情况下如何工作

Question

我学习了 JavaScript 和 React Redux 并有这个问题：。

假设我有这个 Redux dispatch：

dispatch(setLogMessage( () =>{"Connecting to env1", 12340, "connecting"})); 

减速器在这里是为了上面setLogMessage的：

   const initialState = {
     log: "",
   };

    case booksActionTypes.LOG_MESSAGE: {
      return {
        ...state,
        log: action.payload,
      };
    }

在mapStateToProps它看起来像这样：

  const [theLog, addLog] = useState([]);

      useEffect(() => {
        if (props.log !== "") {
          addLog([...theLog, createData(props.log)]);
        }
      }, [props.log]);
    
      function createData(message, timestamp, type) {
        console.log('s');
        return { message, timestamp, type };
      }

问题是我玩弄并想在这种情况下学习箭头函数，并希望拥有上述props.log功能，成为解决上述问题() =>{"Connecting to env1", 12340, "connecting"})并将其传递给function createData(... 希望你明白我的问题！

Answer 1

立即从箭头函数返回对象可能在语法上令人困惑......

在{似乎是打开一个新的对象，但在现实中，它是开放的函数体。

要解决此问题，请将对象括在括号中（还要注意对象属性名称）：

() => ({ message: "Connecting to env1", timestamp: 12340, type: "connecting"})

第二个问题是你永远不会调用这个函数。

props.log保存该函数引用，因此要获取其值作为参数，createData您需要调用它（并传递单个值）。

const values = props.log();
createData(values.message, values.timestamp, values.type);

概括

1. 隐式返回需要在返回对象时用括号括起来。
2. 对象必须包含一个属性名称，而不仅仅是一个值（这就是数组的用途）
3. 函数必须被调用，而不仅仅是作为道具传递。