小编cre*_*lus的帖子

我有一个 React 应用程序，它利用 Firebase 提供的自动部署 Github 操作。我的问题是，我没有将文件推送到 Github，因此当工作流脚本文件在 Github 操作中.env运行时，我的代码中没有内置环境变量。yarn build

我尝试通过在存储库的 Github 设置上设置变量来解决这个问题。我尝试了 Github 秘密（在“操作”下）和“环境”。

对于操作 -> 存储库机密，我设置了一个名为 的机密REACT_APP_GOOGLE_MAPS_API_KEY，并将以下脚本添加到我的steps：

REACT_APP_GOOGLE_MAPS_API_KEY=${{secrets.REACT_APP_GOOGLE_MAPS_API_KEY}} yarn && yarn build

然后我还创建了一个名为 的环境env，并在操作 -> 环境机密上添加了相同的环境，并将脚本更改为：

REACT_APP_GOOGLE_MAPS_API_KEY=${{env.REACT_APP_GOOGLE_MAPS_API_KEY}} yarn && yarn build

这些都不起作用；环境变量没有捆绑到项目中，当我尝试在实时链接上加载地图时，由于“缺少 api 密钥”，我收到错误。

如何在 github 中设置秘密/变量，然后在我的工作流程脚本中使用它们？

作为参考，这是您从 firebase 获得的样板脚本：

REACT_APP_GOOGLE_MAPS_API_KEY=${{secrets.REACT_APP_GOOGLE_MAPS_API_KEY}} yarn && yarn build

我正在渲染一个元素，该元素利用 setTimeout 将内部文本从加载状态更改为所需的消息：

function Message({ message }: any) {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    const CTATimer = setTimeout(() => {
      setShowMessage(true);
    }, 1500);
    return () => {
      clearTimeout(CTATimer);
    };
  }, []);

  if (!showMessage) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <div>{message.text}</div>
    </>
  );
}

相应的测试渲染，然后将时间提前 1500 毫秒，然后应该显示消息。然而，目前测试失败，终端显示文本仍然是Loading...。测试是这样写的：

const mockMessage = {
  text: "this is a message",
  answers: [],
  id: 1,
};

afterEach(() => {
  jest.useRealTimers();
});

it("should show message after setTimeout", () => {
  jest.useFakeTimers(); …

我正在将本机基础添加到我现有的 Expo React 项目中。我已经按照安装指南中的描述添加了必要的包，但是每次出现此错误时，我都会尝试多次迭代安装和卸载、删除节点模块并再次运行它，react-aria直接添加（包括只是@react-aria/interactions），但是然后添加每个包时我总是收到一个新错误。

大多数堆栈溢出帖子的建议似乎是“删除节点模块并重试”，但这对我没有任何影响。

我的package.json很简单：

"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/slider": "^3.0.3",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"expo": "~39.0.2",
"expo-ads-admob": "~8.3.0",
"expo-cli": "^4.2.1",
"expo-status-bar": "~1.0.2",
"firebase": "^7.9.0",
"mobx": "^6.1.7",
"mobx-react": "^7.1.0",
"native-base": "^3.1.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-elements": "^3.2.0",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "^3.1.4",
"react-native-screens": "~2.10.1",
"react-native-svg": "12.1.0",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "~0.13.12",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@expo/webpack-config": "^0.15.0",
"eslint": …

我正在尝试遵循 TDD，并且span5 秒后应该会出现在屏幕上。我根本没有实现跨度，所以测试应该失败，但目前它通过了测试expect(messageSpan).toBeInTheDocument。

这是我的两个测试：

it("doesn't show cta message at first", () => {
    render(<FAB />);
    const messageSpan = screen.queryByText(
      "Considering a career in nursing? Join our team!"
    );
    expect(messageSpan).toBeNull(); // passes, as it should
  });

  it("should show the cta message after 5 secs", () => {
    render(<FAB />);
    setTimeout(() => {
      const messageSpan = screen.getByText( // also tried queryByText instead of get
        "Considering a career in nursing? Join our team!"
      );
      expect(messageSpan).toBeInTheDocument(); // also passes, even …

我想将一个值传递给组件并根据该值渲染多个子组件。例如，如果我传入count={4}props，那么我想渲染 4 个<Icon/>组件。如果我传入5，我想渲染5，依此类推。

目前，我能想到的就是获取该值并将其转换为数组（即执行循环for并在每次迭代时将占位符元素推入数组），然后在该数组上执行映射。但这似乎有点矫枉过正。

有一个简单的解决方案吗？

我正在按照本教程进行操作，并准备完成有关实现自定义 AuthContext 提供程序的部分。这是建议的代码：

const AuthProvider = ({ children }) => {
  const [token, setToken] = React.useState(null);

  const handleLogin = async () => {
    const token = await fakeAuth();

    setToken(token);
  };

  const handleLogout = () => {
    setToken(null);
  };

  const value = {
    token,
    onLogin: handleLogin,
    onLogout: handleLogout,
  };

  return (
    <AuthContext.Provider value={value}> // AuthContext defined right above component; initialised as an empty object.
      {children}
    </AuthContext.Provider>
  );
};

据我所知，这绝对没问题。但是当我尝试将它添加到我的代码中（字面意思是复制并粘贴到其中）时，return 语句会抛出 9 个错误。Cannot find namespace 'AuthContext'.ts(2503)，'>' expected.ts(1005) …

这个实用程序的文档对我来说毫无意义。根据this和thisMarkerClusterer ，您可以通过首先通过的属性将群集图标转换为标记来自定义群集图标renderer，然后像普通标记一样应用图标样式。然而， anew google.maps.Marker需要一个position属性才能工作 - “我无权访问的属性”。我可以访问各个标记位置的各个位置，但使用标记聚类功能的全部意义在于为您计算中点。

如果我不知道位置，如何将簇渲染在正确的位置？我可以访问道具_position上的属性stats，但这会引发错误：

Cannot read properties of undefined (reading 'addListener')

我真的不知道在这里做什么，因为那里似乎没有很多可靠的例子。据我所知，我正在遵循他们的 github中列出的示例。

private createClusteredMarkerMap() {
  new this._GoogleMaps.load((google) => {
    let map = new google.maps.Map(this._map, mapOptions);
    const markers = this._locations.map(({ lat, long }) => {
      // loop and extract lat/lng
    });

    new markerClusterer.MarkerClusterer({
      map,
      markers,
      renderer: {
        render: (clusters, stats) => {this.testRenderer(clusters, stats)} // trying to edit the icons here
      } …