javascript - React Component List 在 Filtered 时无法正确更新 Input 组件的默认值

Question

我目前正在设计一个应用程序，它包含一个列表中的值列表，称为修饰符，由用户编辑，然后存储以供以后在计算中使用。为了更容易找到特定的修饰符，我在列表中添加了一个搜索功能，以便将相似的修饰符一起拉出给用户。但是，一旦用户将一个值放入过滤列表然后取消过滤列表，组件就会错误地将值分配给错误的修饰符。更具体地说， Ant 设计<List>过滤后的组件无法放置正确的 defaultValue对于每个关联的输入。即，当我将一个值输入过滤列表中的第一项然后取消过滤时，列表错误地将值放在未过滤列表的第一个元素中，而不是它应该关联的修饰符中。它应该通过在 context 中分配其分组的值来将适当的值与关联元素一起使用我存储了，但是显然存储不了。

这是我正在谈论的 Ant Design 列表组件，我已经删除了一些不需要理解问题的回调。 renderitem Prop 将 dataSource Prop 作为输入并将所有值映射到其中作为 <List.Item> 的输入。组件。

编辑:我没有提到第一行中的钩子(Hook)，搜索功能使用它来过滤查看的单词以相应地更新列表。我还删除了一些不必要的内联 css 和组件，因为它们与问题无关以提高可读性。我还决定举一个更具体的例子来说明我的问题:

这是用户设置的初始值的图像。

这是在搜索修饰符的确切名称并过滤列表后立即生成的图像。显然，未过滤列表第一项的值被放入过滤列表第一项的输入中，这是主要问题。现在当搜索被撤消时，一切都会正确设置，所以我不确定如何解决这个问题。

对于为什么会发生这种情况，我有一些想法。我知道输入组件没有被重新渲染，而是它们的 id 只是在搜索发生时被换掉。因此，如果除了列表部分之外还有任何方法可以强制重新呈现输入组件，请告诉我!

const Modifiers = () => {
    const [searchFilter, setSearchFilter] = useState(military); //Only for words in search bar, "military" will be replaced with entire data set later
    const context = useContext(Context)

    const search = value => {
        if(value != ""){
            setSearchFilter(searchFilter.filter(mod => mod.name.toLowerCase().indexOf(value.toLowerCase()) != -1))
        }
        else {
            setSearchFilter(military)
        }
    }

    const updateContext = (e, name) => {
        let id = name.toLowerCase().replace(/ /gi, "_");

        if(context.modifiers[id] != undefined){
            context.modifiers[id] = parseFloat(e.target.value)
        }      
    }

    return (
        <Layout>
            <SiteHeader/>
            <Content style={{ padding: '1% 3%', backgroundColor: "white"}}>
                <Typography>
                    <Title level={2} style={{textAlign: "center"}}>
                        Modifier List
                    </Title>
                </Typography>

                <List dataSource={searchFilter} header={<div style={{display: "flex"}}> <Title level={3} style={{paddingLeft: "24px"}}>Modifiers</Title> <Button shape="circle" size="large" icon={<InfoCircleOutlined/>}/> <Search allowClear placeholder="Input Modifier Name" enterButton size="large" onSearch={search}
                    renderItem={mod => (
                        <List.Item extra={parseTags(mod)}>
                            <List.Item.Meta description={mod.desc} avatar={<Avatar src={mod.image}/>} title={<div style={{display: "flex"}}><Title level={5}>{mod.name}: </Title> <Input defaultValue={context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] != undefined ? context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] : ""} id={mod.name} onChange={(e) => updateContext(e, mod.name)}/></div>}/>
                        </List.Item>
                    )}
                />
            </Content>
            

        </Layout>
    );
}
export default Modifiers;

这是上下文类，修饰符字段是当前的问题。目前只有2个，但添加更多后问题仍然存在，这2个修饰符也是未过滤列表中的第一个。

export class Provider extends React.Component {
    state = {
        name: "None Selected",
        tag: String,
        flag: "images/flags/ULM",
        modifiers: {
            army_tradition: 0,
            army_tradition_decay: 0,
        }
    }

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

这是military中的一个元素array 看起来也可以供引用。 <List.Item> 中的正则表达式组件只是将对象的名称字段转换为与 context.modifiers 中存储的内容相匹配的字段。字段。

export const military = [
    {
        name: "Army Tradition",
        desc: "Adds to the rate of army tradition gained each year.",
        function: "ADDITIVE",
        type: "WHOLE NUMBER",
        category: "MILITARY",
        image: "/images/icons/landLeaderFire.png",
    },
...

感谢您提供的任何帮助。

Answer 1

我已经解决了这个问题，我用“key”属性替换了“id”属性(文档甚至没有告诉你)现在一切正常!