如何在向表单添加新的 React 组件时防止重新渲染答案

【问题标题】：How to prevent re-rendering upon adding new React component to form如何在向表单添加新的 React 组件时防止重新渲染
【发布时间】：2022-07-12 00:52:56
【问题描述】：

TLDR：当我单击按钮将新元素添加到 React 组件列表时，会导致整个列表重新呈现并丢失过程中的状态。我怎样才能防止这种情况发生？

我有一个包含一个文本区域和一些其他表单元素的组件列表。

摘录：

        <FormControl  as='textarea'  onChange={e => setTopicSents(e.target.value)}></FormControl>

如您所见，我将表单输入存储在组件本身的状态中。我在呈现所有文本区域的“主题”组件中定义了“主题”组件。

我有一个按钮，点击后会向“主题”数组添加一个新的 FormControl 元素：

        const [topics, setTopics] = useState([0])
        function addNewTopic(){
            setTopics([...topics, topics+1])
        }

            <div>
                {topics.map((i)=>  <Topic></Topic> )}
                <Row style={{height: "3em"}}>
                <div>
                    <Button onClick={addNewTopic} className="cyan-btn">Add New 
                   Topic</Button>
                </div>
            </Row>
            </div>

问题是，当我单击按钮添加新的表单元素时，它会导致整个列表重新呈现并清除用户在表单中键入的任何内容。如何更改这一点，以便在添加新表单元素时保留状态，或者添加新元素不会导致其他表单元素的重新呈现？

我希望这是有道理的。任何帮助将不胜感激！

【问题讨论】：

如果您阻止列表重新呈现，您将看不到新添加的主题。问题是您在状态中存储了“错误”的数据：您不需要存储主题索引而是它的值。

标签： javascript reactjs redux react-redux use-state

【解决方案1】：

你试过了吗……

function addNewTopic(e){
e.preventDefault();
            setTopics([...topics, topics+1])
        }

【讨论】：