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

编程问答 2022-05-14

问题描述

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

假设我有这个 Redux dispatch：

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

reducer 是为了上面的 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,type };
      }

问题是我在玩，想学习这个上下文中的箭头函数，想拥有上面的props.log，成为一个解决上面() =>{"Connecting to env1","connecting"})的函数并将它传递给{{ 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. 必须调用函数，而不仅仅是作为道具传递。
javascriptmapstatetopropsmapstatetopropsreactjsreactjsreactjsreactjsreduxreduxreduxredux