Javascript 反应：输入更改延迟

我在父组件的状态中有一个相当大的对象数组。当我将它们作为道具传递给子组件（没有状态，只有道具）时，当输入发生变化时，我（在子组件中）的输入会有很大的延迟

我已经阅读了关于类似问题的答案和使用shouldcomponentupdate的建议

但是，不幸的是，我仍然不明白如何在我的示例中应用它。父组件是index.js。因此：

1） 我应该在儿童组件（StoryList.tsx和StoriesScreenItem/StoriesScreenList）中使用componentdidupdate还是shouldcomponentupdate（）

2） 我应该在子组件中添加状态以使用componentdidupdate还是shouldcomponentupdate（）

3） 在我的示例中，为什么会发生输入延迟

4） 或者其他想法我如何处理这个问题

---

任何帮助都将不胜感激

我的建议是为故事创建一个功能组件

它可能看起来像这样：

export const Story = props => {
   const [story, setStory] = useState(props.story);
   const handleChange = e => {
       const updatedStory = {...story};
       updatedStory.caption = e.target.value;
       setStory(updatedStory);
   };
   return (
       <div>
           <div>
               <div>
                   {story.previewUri ? (
                       <div>
                           <img
                               style={{
                               objectFit: "cover",
                               border: "4px solid #1ec1b6"
                            }}
                            width="110"
                            height="168"
                            src={story.previewUri || null}
                            alt={"Фото сториc"}
                        />
                    </div>
                ) : (
                    <div
                        style={{
                            border: "4px solid #1ec1b6",
                            textAlign: "center",
                            fontSize: "14px"
                        }}
                    >
                        Link image
                    </div>
                )}

                <div>
                    <span>Story</span>

                    <div>
                        <div>
                            <span>Preview title</span>
                        </div>
                        <div>
                            <input
                                style={{ width: "100%" }}
                                maxLength={99}
                                value={story.caption}
                                onChange={e => handleChange(e)}
                            />
                        </div>
                    </div>
                </div>
            </div>

            <StoriesScreenList
                screens={story.stories}
                onChange={screens => props.changeScreen(screens, props.index)}
            />
           </div>
       </div>
    );
};
export default Story;

export const Story=props=>{
const[story，setStory]=useState（props.story）；
常量handleChange=e=>{
const updatedStory={…story}；
updatedStory.caption=e.target.value；
故事集（更新故事）；
};
返回(
{story.wuri(
) : (
链接图像
)}
故事
预览标题
handleChange（e）}
/>
props.changeScreen（屏幕，props.index）}
/>
);
};
导出默认故事；

其中每一个都有自己的状态，因此您不必在每次更改单个故事时更新整个故事数组

这就是造成延迟的原因

---

我希望这会有所帮助。

我认为这不适用于这里，因为您想要延迟的操作似乎是更新状态。这将导致文本字段不反映状态中包含的实际文本。谢谢！但在我的项目中，我们不使用钩子：（如果我像这样做，但使用state和setState，这没关系吗？我相信使用state和setState应该可以很好地工作。不幸的是，这对我没有帮助，但无论如何，非常感谢您关注我的问题！：）。我决定在状态中设置“focus:false”，只有当孩子们的输入（或选择）获得焦点时才更新孩子们的组件。@JANE DOE很高兴你找到了解决方案。你应该在回答中写下你所做的并接受它，这样其他人就可以从你的经历中学习。