javascript - 用相同类型的新对象数组反应替换对象数组
问题描述
所以我有一个数组是一个类的状态。我们称它为 A。A 通过构造函数中的函数 f 填充了 B 类型的对象。稍后,我使用 f 和新数据生成一个名为 C 的 B 类型对象的新数组。然后我使用 setState({A: C})。但是,这会导致来自第一个阵列的数据保留在显示器上。我不知道如何解决这个问题。
编辑:代码片段
class ClassBox extends Component {
constructor(props) {
super(props);
// note data here uses the keys from the config file
this.state = {
data: this.props.data,
filteredData: [],
functionData: []
};
this.generateFunctionData = this.generateFunctionData.bind(this);
this.state.functionData = this.generateFunctionData();
this.state.filteredData = this.state.functionData;
this.handleSearch = this.handleSearch.bind(this);
}
generateFunctionData(useData = false, data = null){
return useData ? ProcessJSON.extractFunctions(data.functions).map((_function, index) =>
{return createMethodBox(_function.Func_name, _function.Description, _function.Access_Mod, index)}) : ProcessJSON.extractFunctions(this.props.data.functions).map((_function, index) =>
{return createMethodBox(_function.Func_name, _function.Description, _function.Access_Mod, index)});
}
handleSearch(input) {
// convert to lower case to avoid capitalization issues
const inputLowerCase = input.toString().toLowerCase();
// filter the list of files based on the input
const matchingList = this.state.functionData.filter((method) => {
return method.props.name.toLowerCase().includes(inputLowerCase)
}
);
this.setState({
filteredData: matchingList
});
}
render() {
console.log(this.state.filteredData)
return (
<Container>
<NameContainer>
<h1>{this.state.data.className}</h1>
</NameContainer>
<ContentContainer>
<DescriptionContainer>
{this.state.data.description}
</DescriptionContainer>
<StyledDivider/>
<VarContainer>
<h1>Variables</h1>
<VarTableContainer>
<BootstrapTable
keyField="id"
data={[]}
columns={testColumns}
bordered={false}
noDataIndication="Table is Empty"
classes="var-table"
/>
</VarTableContainer>
{/*{this.state.data.variables}*/}
</VarContainer>
<StyledDivider/>
<MethodContainer>
<MethodHeader>
<h1>Methods</h1>
<StyledSearchBar onSearch={this.handleSearch}
isDynamic={true} allowEmptySearch={false} minChars={0}
className='searchBar'/>
</MethodHeader>
<Methods>
{this.state.filteredData}
</Methods>
</MethodContainer>
</ContentContainer>
</Container>
);
}
class Classes extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
displayIndex: this.props.displayIndex
};
this.treeData = createTreeData(this.state.data);
this.classBox = null
}
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.displayIndex !== this.props.displayIndex){
const funcData = this.classBox.generateFunctionData(true, this.state.data[0][this.props.displayIndex]);
console.log(funcData);
this.classBox.setState({data: this.state.data[0][this.props.displayIndex], functionData: funcData, filteredData: funcData });
this.classBox.forceUpdate();
this.setState({displayIndex: this.props.displayIndex});
}
}
render() {
this.treeData = createTreeData(this.state.data);
return (
<Container>
<FileTreeContainer>
<StyledTreeMenu data={treeData}/>
</FileTreeContainer>
<ClassInfoContainer>
<ClassBox ref = {el => this.classBox = el} data = {this.state.data[0][this.state.displayIndex]}/>
</ClassInfoContainer>
</Container>
)
}
Classes 包含 ClassBox 的一个实例。执行 componentDidUpdate 后,页面仍然显示旧的方法框,即使 functionData 已更改。
编辑2:还值得注意的是,当我用登陆视图替换类视图并返回类视图时,它会正确显示页面。
解决方案
您设置状态的方式应该是正确的,因为您将其设置为从 .filter 新创建的数组。
我认为问题在于您将方法组件存储在过滤数据状态中。组件不应存储在 state 中。
我相信您的组件只是重新渲染,而不是删除旧生成的组件。也许尝试将搜索输入映射到状态并以这种方式生成方法组件。
推荐阅读
- python - 编译错误 OpenCV 4.2.0 Ubuntu 18.04:目标 'modules/videoio/CMakeFiles/opencv_videoio.dir/all' 失败
- java - 画一个棋盘,每个棋子有 0.4 的机会被填满
- c# - C# DocuSign API:在 Docusign 上提取服务器模板而不是本地模板文档
- javascript - 嵌套组件可以改变 React 上下文吗?
- jquery - 为什么溢出不保持在底部?
- node.js - Mongoose 聚合查询返回空结果
- java - 合并多个 ByteBuf 时在 Netty 中选择 UnpooledByteBufAllocator 和 Pooled
- android - 当我在 Android Studio 中进行增量构建时,Firebase Crashlytics 崩溃并显示“缺少 Crashlytics 构建 ID”
- javascript - 按钮在 Vuejs 表单中始终处于禁用状态
- apache-kafka - auto.leader.rebalance.enable 属性的推荐值是多少