如何向 useEffects 添加下拉菜单？

Question

我是 React 和 office-ui-fabric 的新手，在理解如何向 useEffect 添加下拉菜单时遇到了问题。用户从下拉列表中选择选项，我需要 useEffects 来监视选择给另一个用户的值，以便我可以将选择的值发送给另一个函数。

const options: IDropdownOption[] = [
  { key: "A", text: "A", itemType: DropdownMenuItemType.Header },
  { key: "B", text: "B" },
  { key: "C", text: "C" }
];

const [selectedItem, setOption] = React.useState("");

React.useEffect(() => {
  window.addEventListener("message", ev => {
    switch (ev.data.command) {
      case "selectedItem": {
        console.log(`Got message`);
        setOption(ev.data.payload);
        break;
      }
    }
  });
}, []);

let test = () => {
  console.log("Test");
  vscode.postMessage({
    command: "setOption",
    text: "select option"
  });
  window.console.log(`Sent message.`);
};

return (
  <div>
    <Stack>
      <Stack.Item grow>
        <Label style={{ color: "white" }}>Select Option</Label>
        <Dropdown
          placeholder="Select option"
          options={options}
          styles={dropdownStyles}
          selectedKey={selectedItem}
          onChanged={selectedOption => {
            setOption(selectedOption.text);
            console.log(selectedOption.text);
            test;
          }}
        />
      </Stack.Item>
    </Stack>
    `enter code here`
  </div>
);

目前我没有在 test() 中看到日志 "Test" 或任何日志 "Got message" 等，这意味着测试没有被触发。这是正确的方法吗？还是我应该有一个类似 onClick 的功能来测试？

Answer 1

您的 test 函数没有触发，因为您没有调用它；您有裸令牌 test，而不是函数调用 test().

与其直接在事件处理程序中连接副作用处理程序，不如使用 useEffect（最好称为 useSideEffect）并指定您希望它在您更改时触发你的 selectedItem:

// Whenever the value of selectedItem changes, fire this callback
// selectedItem will change as a consequence of setOption() being called
React.useEffect(() => {
    vscode.postMessage({
        command: "setOption",
        text: selectedItem
    });
}, [selectedItem])

// Define a callback with a hook, so we don't generate a new
// anonymous function every render
const onItemChanged = React.useCallback(e => setOption(e.text), [setOption]);

<Dropdown ... onChanged={onItemChanged} />

useEffect 的第二个参数是要监视的值列表。当此组件重新呈现，并且任何列出的项目的值已更改时，将调用定义的函数。

通过使用 useCallback 定义回调函数，而不是在每次重新呈现组件时都重新定义一个匿名函数，您将避免额外的垃圾生成，并且可以轻松地保持 [=25= 的逻辑列表]一起

Answer 2

在 useEffect 声明的末尾，有一个空括号放在那里。这就是您需要放置效果的所有依赖项（=触发器）的地方，例如本例中的 selectedItem。

目前，空数组告诉它永远不会再触发。

如何向 useEffects 添加下拉菜单？

How do i add a dropdown to useEffects?

typescript

office-ui-fabric

react-tsx