0

我是 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() 中的日志“测试”或任何日志“得到消息”等，这意味着测试没有被触发。这是正确的方法吗？还是我应该有一个类似 onClick 的测试功能？

4

2 回答 2

0

在 useEffect 声明的末尾，有你放在那里的空括号。这就是你需要放置效果的所有依赖项（=触发器）的地方，就像selectedItem在这种情况下一样。

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

于 2019-09-04T22:19:42.347 回答
0

你的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 定义回调函数，而不是作为每次重新渲染组件时重新定义的匿名函数，您将避免额外的垃圾生成，并且可以轻松地将“更改时要做的事情”的逻辑列表保持在一起.

于 2019-09-04T22:13:12.603 回答