Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >最初填充的道具值,然后没有出现在react中。

最初填充的道具值,然后没有出现在react中。
EN

Stack Overflow用户
提问于 2020-09-10 14:38:48
回答 1查看 32关注 0票数 0

我有一个简单的组件,我正在尝试构建-一个多选择与用户的当前安全级别预选。初始安全级别的道具正按预期的方式传递给组件。然后,我将使用webservice并获取所有可用的安全级别,并将道具安全级别数组(它只是一个简短代码数组)与服务中的安全级别标签相匹配。

问题是,在parseResults方法中,当前面几行行都很好时,security_levels支柱显示为一个空数组[] --这是如何发生的?我不明白为什么道具在某一阶段就被植入了,然后它们就没有了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { useState, useEffect } from 'react';
import Loader from "react-loader-spinner";
import QueryHelper from "../Utilities/QueryHelper";
import Select from "react-select";

function SecurityLevelSelect({security_levels, onSecurityLevelChange}) {
    console.log("outside parseResults");
    console.log(security_levels); // shows expected array of props.security_level shortCode values

    const [selectedItems, setSelectedItems] = useState([]);
    const [items, setItems] = useState([])
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);

    const helper = new QueryHelper();

    const handleChange = (e) => {
        onSecurityLevelChange(e.target.value);
    }

    useEffect(() => {
        fetchData();
    }, [])

    const fetchData = () => {
        setIsLoaded(false);

        helper.fetchData('securitylevel')
            .then(
                (result) => {
                    setIsLoaded(true);
                    setItems(parseResults(result.results));
                },
                (error) => {
                    setIsLoaded(true);
                    setError(error);
                }
            )
    }

    const parseResults = (results) => {
        let data = [];
        let selected = [];

        console.log("inside parseResults");
        console.log(security_levels); // shows [] as value of security_levels

        results.forEach(result => {
            console.log(result.shortCode);
            let datum = {
                value: result.shortCode,
                label: result.name
            }

            if (security_levels.includes(result.shortCode)) {
                console.log(result.shortCode + ' is selected');
                selected.push(datum)
            }
            data.push(datum)
        });

        setSelectedItems(selected); // sets it to []
        return data;
    }

    // then render some stuff
    return (
        <some_random_content />
    ); 
}

export default SecurityLevelSelect;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-10 15:00:34

我认为security_levels在组件中可用的原因,而不是parseResults,可能是因为呈现或作用域。

使用useEffect,security_levels可能在其第一次呈现时不可用,但它不知道如何再次运行。所以不妨试试:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    useEffect(() => {
        fetchData();
    }, [security_levels])      {/* <----- add security_levels as a dependency here */}

您可能需要考虑将security_level传递给fetchData(),然后传递给parseResults,这将解决范围界定的问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63838538

复制
相关文章
dataframe填充缺失值_pandas填充空值
将其Nan全部填充为0,这时再打印的话会发现根本未填充,这是因为没有加上参数inplace参数。
全栈程序员站长
2022/09/22
2.8K0
pandas处理缺失值的函数_pandas填充缺失值
df.dropna()函数用于删除dataframe数据中的缺失数据,即 删除NaN数据.
全栈程序员站长
2022/09/30
2K0
我是怎样克服对 React 的恐惧,然后爱上 React 的
在一个交互式应用程序一切罪恶的根源是管理状态。“传统”的方式是MVC架构,或者一些变体。MVC提出你的模型是检验真理的唯一来源 – 所有的状态住在那里。视图是源自模型,并且必须保持同步。当模式的转变,所以没有查看。最后,用户交互是由控制器,它更新模型抓获。到目前为止,一切都很好。
哲洛不闹
2018/09/18
9630
我是怎样克服对 React 的恐惧,然后爱上 React 的
头条面试官问我看过哪些源码,然后就没有然后了
最近,我的一位朋友在找工作,已经拿到了美团、快手等公司的Offer,准备选择其中一家入职了。
芋道源码
2019/07/05
1.1K0
头条面试官问我看过哪些源码,然后就没有然后了
如何在 React TypeScript 中将 CSS 样式作为道具传递?
React 是一种流行的 JavaScript 库,用于构建动态用户界面。最近,它与 TypeScript 的结合变得越来越流行。由于 TypeScript 的静态类型检查和更好的 IDE 支持,它使得使用 React 更加容易和可维护。当开发 React 应用程序时,我们通常需要使用 CSS 样式来渲染组件。本文将介绍如何在使用 React TypeScript 时,将 CSS 样式作为道具(Props)传递给组件。
网络技术联盟站
2023/06/07
2.2K0
手写一个react然后看透react运行机制
react的源码,的确是比vue的难度要深一些,本文也是针对初中级,本意让博友们了解整个react的执行过程。
goClient1992
2022/12/14
1.5K0
pandas缺失值填充_python缺失值处理 fillna
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170005.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
9500
基于随机森林方法的缺失值填充
本文中主要是利用sklearn中自带的波士顿房价数据,通过不同的缺失值填充方式,包含均值填充、0值填充、随机森林的填充,来比较各种填充方法的效果
皮大大
2021/03/02
7.2K1
python | pandas 改变列的位置、填充缺失值
本期的文章源于工作中,需要固定label的位置,便于在spark模型中添加或删除特征,而不影响模型的框架或代码。 spark的jupyter下使用sql 这是我的工作环境的下情况,对你读者的情况,需要具体分析。 sql = ''' select * from tables_names -- hdfs下的表名 where 条件判断 ''' Data = DB.impala_query(sql) -- 是DataFrame格式 **注意:**DB是自己写的脚本文件 改变列的
努力在北京混出人样
2019/02/18
4.9K0
应用:数据预处理-缺失值填充
2.直接根据没有缺失的数据线性回归填充,这样填充的好会共线性,填充的不好就没价值,很矛盾
sladesal
2018/08/27
1.1K0
应用:数据预处理-缺失值填充
ArcPy批量填充栅格图像NoData值
  本文介绍基于Python中ArcPy模块,对大量栅格遥感影像文件批量进行无效值(NoData值)填充的方法。
疯狂学习GIS
2023/06/26
4160
ArcPy批量填充栅格图像NoData值
使用scikit-learn填充缺失值
在真实世界中的数据,难免会有缺失值的情况出现,可能是收集资料时没有收集到对应的信息,也可能是整理的时候误删除导致。对于包含缺失值的数据,有两大类处理思路
生信修炼手册
2021/02/09
2.8K0
Pandas缺失值填充5大技巧
.dataframe tbody tr th:only-of-type { vertical-align: middle; } <pre><code>.dataframe tbody tr th { vertical-align: top; } .dataframe thead th { text-align: right; } </code></pre>
皮大大
2023/08/25
9320
Python-pandas的fillna()方法-填充空值[通俗易懂]
函数形式:fillna(value=None, method=None, axis=None, inplace=False, limit=None, downcast=None, **kwargs)
全栈程序员站长
2022/09/22
15.3K0
Python-pandas的fillna()方法-填充空值[通俗易懂]
取出df3["text"]里 tblActors字段的内容,如果没有就填充一个值,怎么破?
前几天在Python最强王者交流群【WYM】问了一个Pandas处理的问题,提问截图如下:
Python进阶者
2022/11/14
6340
取出df3["text"]里 tblActors字段的内容,如果没有就填充一个值,怎么破?
matlab二值图像孔洞填充_matlab边缘检测之后怎么填充
subplot(1,2,1),imshow(img_bw), title(‘有空洞的图像’);
全栈程序员站长
2022/09/30
1.3K0
matlab二值图像孔洞填充_matlab边缘检测之后怎么填充
用值填充JavaScript数组的几种方法
通过将点扩展符与数组实例的 keys 方法结合使用,我们可以从0开始以升序数填充数组。
张张
2020/04/21
2.6K0
用值填充JavaScript数组的几种方法
python | pandas 改变列的位置、填充缺失值
本期的文章源于工作中,需要固定label的位置,便于在spark模型中添加或删除特征,而不影响模型的框架或代码。 spark的jupyter下使用sql 这是我的工作环境的下情况,对你读者的情况,需要具体分析。 sql = ''' select * from tables_names -- hdfs下的表名 where 条件判断 ''' Data = DB.impala_query(sql) -- 是DataFrame格式 **注意:**DB是自己写的脚本文件 改变列的位置 前
努力在北京混出人样
2018/05/14
5.2K0
点击加载更多

相似问题

React:如何“记住”最初的道具

494

React :为什么最初没有定义我的值?

10

React不填充丢失的对象道具

30

没有在JSX中填充的StencilJS道具

25

更改react中组件的值道具

28
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文