小编J.K*_*.Ko的帖子

我是 reactJS 的新手，正在编写代码，以便在从 DB 加载数据之前，它会显示加载消息，然后在加载后，使用加载的数据渲染组件。为此，我同时使用了 useState 钩子和 useEffect 钩子。这是代码：

问题是，当我检查 console.log 时，useEffect 被触发了两次。因此，代码两次查询相同的数据，这是应该避免的。

下面是我写的代码：

import React from 'react';
import './App.css';
import {useState,useEffect} from 'react';
import Postspreview from '../components/Postspreview'

const indexarray=[]; //The array to which the fetched data will be pushed

function Home() {
   const [isLoading,setLoad]=useState(true);
   useEffect(()=>{
      /*
      Query logic to query from DB and push to indexarray
      */
          setLoad(false);  // To indicate that the loading is complete
    })
   },[]);
   if (isLoading===true){
       console.log("Loading");
       return <div>This is loading...</div>
   }
   else {
       console.log("Loaded!"); …

这是正在发生的事情：

-我正在 RN 中开发一个博客应用程序。每个用户都有一个个人资料页面，其中可以看到用户撰写的所有帖子。

-每个帖子都有一个缩略图，我按照我应该的方式在 FlatList 中渲染帖子。

-但是，如果列表足够大，例如 100+，则对于 iOS 和 Android，帖子中的图像在向上/向下滚动时会闪烁。这是可以理解的，这是一种糟糕的用户体验。

-有趣的是，如果列表相当小，图像根本不会闪烁。如果这是语法问题，所有图像都会闪烁。

- 使用 FlatList 时是否会出现这种行为？即在渲染大量项目时会出现问题吗？如果是这样，我该怎么做才能防止闪烁？

仅供参考，下面是我用于 FlatList 组件的代码。足够简单：

     const PostArray = (props) => {
         return (
             (props.postarray===null ?
             null  :
             <FlatList
                 data={props.postarray}
                 style={{marginTop:10}}
                 renderItem={({ item }) =>
                 <ProfilePostsPreview item={item}/>
             }
             keyExtractor={(item, index) => index.toString()}
             />
             )
         )
     }

有什么建议吗？提前致谢！

我正在使用 React 开发一个网络应用程序，这是我想要做的：

1. 在最高阶组件中，检查用户是否已登录，如果已登录，则更新“userinfo”上下文值。
2. 在 Profile.js 中，获取“userinfo”上下文值。
3. 检查 'userinfo' 是否为空，并相应地调用不同的 API。

我写了下面的代码。问题是将 userinfo 上下文值传递给组件显然存在时间延迟。因此，当使用 useEffect() 钩子时，当 userinfo 不为 null 时，Profile.js 将呈现两次。

有没有办法修复此代码，使其等待 'userinfo' 变量，然后相应地调用相关 API，而不是之前？

下面是代码。有什么建议吗？非常感谢！

import React, {useEffect, useContext} from 'react';
import Userinfo from "../context/Userinfo";


function Profile(props) {

   const {userinfo, setuserinfo}=useContext(Userinfo);

   useEffect(()=>{      
       ((userinfo==null)?
       /*API call A (When user is not logged in) */ :
       /*API call B (When user is logged in) */
       )},[userinfo])  

   return (
       (userinfo==null)?
       /*Elements to render when user is not logged in) */ :
       /*Elements …

我正在使用 React 开发一个 Web 应用程序，并使用上下文 API 来跨不同层次结构的多个组件存储一些信息。我正在 App.js 上存储如下所示的对象：

 /*
 import Userinfo from './context/Userinfo'
 */

 function App() {
      const [userinfo, setuserinfo] = useState({id: some_id, username: some_username, profile_picture: some_profile_picture})
 /*
 */
 }

然后在更深的组件上使用上下文，如下所示：

 import Userinfo from '../context/Userinfo';

 function Profile() {
      const {userinfo, setuserinfo)=useContext(Userinfo);

      const infoupdate = () => {  //Function to update the userinfo stored by context API
           setuserinfo({id: new_id, username: new_username, profile_picture: new_profile_picture})
      }
     /////////

问题是，如何只更新一对存储的对象？例如，假设我只想更新“id”部分，同时保持其他字段相同。执行此操作的语法是什么？

预先非常感谢！

我正在尝试执行以下操作：根据长度相等的数字数组对字符串数组进行排序。例如：

A=[a,b,c,d,e]
B=[1,3,2,5,4]

A'=[a,c,b,e,d] //<=The desired outcome

基本上，我正在考虑基于将数组 B 排序为升序对数组 A 进行排序。在这里，我正在考虑隐式值对，就像对象一样。

我可以考虑创建一个对象，对其进行排序，然后将字符串数组分离出来，但这可能代码太多，我想知道是否有更简单的方法来实现这一点。
欢迎任何建议。非常感谢！

我想在上传数据之前检查文件是否确实存在于路径中。如果没有，它将为该路径设置一个新文档。如果是，它只会更新数据。

在文档中找不到执行此操作的方法。什么是最好的方法来做到这一点？这是我认为看起来相似的内容。有什么建议？谢谢！

const ref=firebase.firestore().collection('posts').doc('post_id');
if (!ref.exists) {
     firebase.firestore().collection('posts').doc('post_id').set(data);
}
else {
     ref.update(data);
}

我知道我上传了一个类似的问题，但我的意图在这里不同，所以这不是一个重复的问题。

我想根据另一个数字数组对数组进行排序。更具体地说，如果 1 是数字数组的第 n 个元素，我想重新排列目标数组，以便原始数组中的第 n 个元素是第一个元素，依此类推。例如;

    //Case 1
    const input = ["a", "b", "c", "d", "e"];
    const order = [2, 4, 5, 1, 3];

    intended_result: ["d", "a", "e", "b", "c"];

    //Case 2
    const input = ["a", "b", "c", "d", "e"];
    const order = [3, 1, 4, 5, 2];

    intended_result: ["b", "e", "a", "c", "d"];

执行上述操作的 Javascript 代码是什么？有什么建议吗？

非常感谢！

我正在使用 React Native 构建一个应用程序。通过 React Native Firebase，我添加了推送通知功能。当我从退出状态打开推送通知时，应用程序打开并在启动屏幕上挂起一段时间，然后崩溃。

这是来自设备的崩溃报告，用符号表示。老实说，我是编程新手，所以我在解释下面的报告时遇到了困难。我认为 RNSplashScreen 模块或 AppDelegate.m 有问题，但不能确定。

谁能帮助我解释这一点并指出可能的根本原因/在哪里查看？

谢谢！

    Exception Type:  EXC_CRASH (SIGKILL)
    Exception Codes: 0x0000000000000000, 0x0000000000000000
    Exception Note:  EXC_CORPSE_NOTIFY
    Termination Reason: Namespace SPRINGBOARD, Code 0x8badf00d
    Termination Description: SPRINGBOARD, <RBSTerminateContext| domain:10 code:0x8BADF00D explanation:scene-create watchdog transgression: application<myapp.myapp>:2661 exhausted real (wall clock) time allowance of 59.91 seconds | ProcessVisibility: Foreground | ProcessState: Running | WatchdogEvent: scene-create | WatchdogVisibility: Background | WatchdogCPUStatistics: ( | "Elapsed total CPU time (seconds): 16.580 (user 16.580, system 0.000), 5% CPU", | "Elapsed …

我一般不熟悉编程，并且希望将 Javascript 映射转换为对象数组。例如，将输入常量转换为输出常量：

const input = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three'],
]);

const output = [
    { number: 1, letter: 'one' },
    { number: 2, letter: 'two' },
    { number: 3, letter: 'three' }
];

这可能是一个简单的代码，但我找不到任何参考。有什么建议吗？谢谢！

我正在尝试执行以下操作的 react/react 钩子编写代码。

从父组件获取对象数组作为 prop 使用useState钩子将其设置为状态。根据预期的过滤器（时间和评级）对状态进行排序，并重新渲染子组件。我看到的是，下面的代码在排序后更新了状态，但是即使状态更新了，依赖于该状态的子组件也不会重新渲染。我认为子组件会在状态改变时自动重新渲染？

import React, {useState} from 'react';
import ProfilePostspreview from './ProfilePostspreview';

function ProfileNavigation(props){
   const [newarray, setnewarray]=useState(props.parray);   //'parray' object passed as props and saved as 'newarray' state    
   const otc = () => {  //Function to sort the state by time and set a new state
       let k=newarray;
       setnewarray(k.sort((a, b) => (a.time > b.time) ? -1 : 1 ));
   }
   const orc = () => {  //Function to sort the state by rating and then time …