小编cbd*_*per的帖子

I'm finding these two pieces of the React Hooks docs a little confusing. Which one is the best practice for updating a state object using the state hook?

Imagine a want to make the following state update:

INITIAL_STATE = {
  propA: true,
  propB: true
}

stateAfter = {
  propA: true,
  propB: false   // Changing this property
}

OPTION 1

From the Using the React Hook article, we get that this is possible:

const [count, setCount] = useState(0);
setCount(count + 1); …

我正在尝试在 Node v10 环境中实现动态导入的基本功能。

主文件

async function main() {
  try {
    const moduleA = await import('./moduleA');
    console.log('Inside main function...');
    moduleA();
    console.log(moduleA);
  }
  catch(err) {
    console.log(err);
  }
}

main();

模块A.js

console.log('Inside global scope module A...');

function moduleA() {
  console.log('Running module A function...');
}

export default moduleA;

这是我运行时得到的结果 npx babel-node main.js

PS C:\myProject\test-module-imports> npx babel-node src/main.js
Inside global scope module A...
Inside main function...
TypeError: moduleA is not a function
    at main (C:\myProject\test-module-imports\src/main.js:9:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at …

我查了一下,发现这是关于在数组中的较大字符串中查找子字符串.Array.Prototype.includes

if (t.title.includes(searchString))

我t是一个$.each迭代通过更大的对象数组的一部分(每个对象都有一些信息,包括字符串,日期等).searchString是用户在框中输入的内容.所有这些都是我在页面上的列表的简单搜索功能.

这在Chrome中运行得很好.但Firefox和IE正在出现错误

TypeError: currentTicket.title.includes is not a function

所以我要么提出一个警告标志,我的应用程序只适用于Chrome或我手工查找功能？奇怪的是来自MDN的doc页面我发布了只有Firefox支持的状态array.includes,奇怪的是它只运行它的Chrome.

为什么 VSCode 会显示此错误？

它只是一个 jsconfig.json 文件。

注意：我没有使用 TypeScript。

我正在建造一个 <BasicForm>组件，用于在我的应用程序中构建表单。它应该处理提交、验证并且还应该跟踪输入状态（如触摸、脏等）。

因此，它需要一些函数来完成所有这些，我一直想知道放置这些声明的最佳位置是什么（关于代码组织和性能优化，考虑 React 和 JavaScript 最佳实践）。

我正在使用 React 16.8 钩子并与 Webpack 捆绑。

到目前为止，这是我所拥有的：

基本表单.js

/* I moved those validating functions to a different file
because I thought they are helpers and not directly related 
to my BasicForm functionality */

import { validateText, validatePassword, validateEmail } from './Parts/ValidationHelpers';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // These are functions to handle these events
  function onChange(event) {...}
  function onBlur(event) {...}
  function onFocus(event) {...}

  // …

我正在将我的 React 项目转换为 Typescript。

我有这样的状态：

AdminBlogPostContainer.tsx

const [blogPost,setBlogPost] = useState<null | BLOGPOST>(null);

return(
  <AdminBlogPostPage
    blogPost={blogPost as BLOGPOST}
    setBlogPost={setBlogPost}
  />
);

AdminBlogPostPage.tsx

interface AdminBlogPostPage {
  blogPost: BLOGPOST,
  setBlogPost:            // <---- WHAT SHOULD I USE AS TYPE HERE ?
}

const AdminBlogPostPage: React.FC<AdminBlogPostPage> = (props) => {
  console.log("Rendering AdminBlogPostPage...");

  return(
    // ...
  );
};

export default AdminBlogPostPage;

这是错误消息：

从Firestore docs 中，我们得到Firestore 文档的最大大小是：

文档的最大大小1 MiB（1,048,576 字节）

题

我如何知道单个文档的当前大小，以检查我是否接近 1mb 限制？

例子：

var docRef = db.collection("cities").doc("SF");

docRef.get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
        // IS THERE A PROPERTY THAT CAN DISPLAY THE DOCUMENT FILE SIZE?
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});

我有一个.envDEV用于开发环境变量的文件名。

并且 VSCode 不将其识别为dotenv文件。

如果我更改文件的语言模式，它似乎可以工作（应用正确的样式，但图标不会改变）。但每当我关闭并重新打开文件时它就会消失。

我正在尝试为此设置自定义文件关联，但到目前为止尚未成功。

seetings.json

"files.associations": {
  "*.envDEV": "dotenv"      // DOES NOT WORK
  "*.envDEV": ".env"        // DOES NOT WORK
},

有人知道怎么做这个吗？

什么之间的区别props.location.pathname和props.match.url

在react-router-dom？

从他们的文档：https : //reacttraining.com/react-router/web/api/location

匹配.url

（字符串）URL 的匹配部分。用于构建嵌套<Link>s

地点

用于匹配子元素而不是当前历史位置（通常是当前浏览器 URL）的位置对象。

到目前为止，我见过它们具有完全相同的值。

例子：

如果我的路线在这个网址中匹配：

/search/searchValue?category=whatever

我想删除查询字符串并转到：

/search/searchValue

我应该使用一个而不是另一个还是它们都可以工作？

我的 Next.js 应用程序上有一个页面执行以下操作：

• 这是一个搜索页面
• 路径名类似于：/search?q=search+slug
• 它在客户端加载数据
• 它需要读取router.query来获取router.query.q值

PS：我正在使用Redux

  const dispatch = useDispatch();
  const router = useRouter();
  const query = router.query as { q: string };
  const queryString = query.q;

  console.log("SEARCH CONTAINER");
  console.log(`queryString: ${queryString}`);

  useEffect(() => {
    dispatch(THUNK.LOAD(queryString));
    return () => { dispatch(ACTION.RESET_STATE()); };
  },[dispatch,queryString]);

请参阅useEffect. 理论上应该只为每个运行一次queryString（实际上是req.query.q）。

但我得到了重复的THUNK.LOAD动作。这就是为什么我console.log()在那里添加了。

这就是它注销的内容：

进而：

这就是为什么我收到重复的派遣的原因。当然我可以if (queryString)在发货前检查一下，或者也许我可以从 获取window.location.search。但令我惊讶的是，它一开始router.query.q就出现了。undefined这怎么可能呢？为什么要req.query异步填充对象？对此有何解释？