我有一个简单的组件,我正在尝试构建-一个多选择与用户的当前安全级别预选。初始安全级别的道具正按预期的方式传递给组件。然后,我将使用webservice并获取所有可用的安全级别,并将道具安全级别数组(它只是一个简短代码数组)与服务中的安全级别标签相匹配。
问题是,在parseResults
方法中,当前面几行行都很好时,security_levels
支柱显示为一个空数组[]
--这是如何发生的?我不明白为什么道具在某一阶段就被植入了,然后它们就没有了。
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;
发布于 2020-09-10 15:00:34
我认为security_levels
在组件中可用的原因,而不是parseResults
,可能是因为呈现或作用域。
使用useEffect,security_levels
可能在其第一次呈现时不可用,但它不知道如何再次运行。所以不妨试试:
useEffect(() => {
fetchData();
}, [security_levels]) {/* <----- add security_levels as a dependency here */}
您可能需要考虑将security_level传递给fetchData()
,然后传递给parseResults
,这将解决范围界定的问题。
https://stackoverflow.com/questions/63838538
复制相似问题