小编Ahm*_*bai的帖子

我正在尝试 Next.js 13 应用程序目录和 React 18 的服务器组件。
按照文档，我async fetch()在服务器组件中放置了一个调用，并将该组件标记为异步。

但是当我将它作为客户端组件的子组件时，它会失败并出现错误

对象作为 React 子对象无效（发现：[object Promise]）

如果我将它作为另一个服务器组件的子组件，它就会按预期工作。

为什么？

代码在这里：

### page.tsx
import { ClientComp } from './ClientComp'

export default function Page() {
  return <ClientComp />
}

### ClientComp.tsx
"use client";
import { ServerComp } from "./ServerComp";

export function ClientComp() {
  {/* @ts-expect-error Async Server Component */}
  return <ServerComp />
}

### ServerComp.tsx
export async function ServerComp() {
  return <h2>ServerComp</h2>
}

我已按照以下教程将 Firebase 添加到我们的 iOS 应用程序https://rnfirebase.io/#3-ios-setup，但是我不断收到以下错误

无法将类型“UnsafeRawPointer”的值转换为预期参数类型“UnsafePointer<pb_byte_t>？” （又名“可选<UnsafePointer>”）

这是我的 Pod 文件

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, min_ios_version_supported
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : …

我试图了解 TypeScript 及其工作原理，所以这是一个非常简单的示例：

const X: string = '5';
const Y: number = 6;
console.log(X+Y) // output '56' ! why not an error ? and why not 11 ?

对于 JavaScript，这样的结果是可以接受的，但是由于 TypeScript 的设计目的是避免逻辑错误，为什么它不介意我们尝试将“字符串”附加到“数字”上。从逻辑上讲，即使对于串联来说，这也是没有意义的。另外为什么默认过程是将 Y 视为string并连接为什么不尝试将 X 转换为number并添加？

当将一个类型的变量分配unknown给另一个变量时，我们应该对该变量进行类型检查unknown，但是 TypeScript 如何理解这个特定条件呢？看起来它正在返回 aboolean但我认为它更复杂：

let first: unknown = 5;
let second: number;

const result = typeof first === 'number';

if(result){
    second = first; // error : Type 'unknown' is not assignable to type 'number'
}

if(typeof first === 'number'){
    second = first; // no errors
}

这个错误是什么意思？

我没有对我的代码进行任何更改。当我构建我的应用程序时，它可以工作，但在开发中，它向我显示以下错误：npm run dev

我尝试重建应用程序，删除所有node_modules，并安装和更新依赖项。

这是跟踪：

at async $fetchRaw2 (/D:/IAICB-70/inteliaiclipboard/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:745:20
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:826:64
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:378:22
at async Object.handler (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1196:19)
at async toNodeHandle (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1271:7)
at async Object.ufetch [as localFetch] (/D:/IAICB-70/inteliaiclipboard/node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (/D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:462:30)
at async Server.toNodeHandle (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1278:9)

我正在研究样式组件，在“根据道具进行调整”部分中遇到了一些问题。

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.primary?"white":"black"};
  background-color: ${props=>props.primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

起初，我尝试使用这段代码，控制台告诉我使用primary=true，所以我就这么做了。

但控制台中出现以下错误，显示“看起来未知的 prop“primary”正在发送到 DOM”。为了解决这个问题，我简单浏览了一下styled-components文档。我发现他们使用$primary而不是primary. 所以最终的代码如下所示：

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.$primary?"white":"black"};
  background-color: ${props=>props.$primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton $primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

我再也看不到错误了，但我仍然不知道它发生的原因并已解决。

这是什么$意思？

word.includes(str)返回boolean表示是否str包含在 中，如果不存在，则word
word.search(str)返回表示第一个在 中找到的number位置的位置。strword-1

起初，我想知道为什么 JavaScript 提供这两种方法，但是可以只创建一种适用于这两种情况的方法，返回位置 else returns undefined，但由于两者都存在，所以它应该是有原因的，也许String.includes更快，或者也许，它是只是为了让事情变得更清楚。

它看起来String.includes应该更快，因为它只检查是否str存在而不是试图找到它的位置，但是，我的简单想法：检查算法str中是否存在应该循环遍历字符（如果有我遗漏的东西让我知道），一旦找到，它就可以轻松检索其位置，所以速度再快不过了。wordwordstrString.includes

我想知道它们之间的真正区别以及两者存在的原因。谢谢你！