使用 setState 反应不重新渲染组件答案

【问题标题】：React not rerender component using setState使用 setState 反应不重新渲染组件
【发布时间】：2021-07-01 12:37:03
【问题描述】：

一开始我想说的是，我在其他文章中没有找到我的问题的答案，所以可能不是重复的。

[已编辑]

我的代码：

export const Structure = () => {
    const [leaf, setLeaf] = useState([]);
    const inputRef = useRef(null);
    const getTree = async () => {setLeaf(await getTreeService());}

    const onClickHandler = () => {
        var leafClone = [...leaf];

        setLeaf(leafClone);
    }
     useEffect(() => { async function getData() { await getTree(); } getData(); }, []);
     
     return(<div>
                <div>
                    <input ref={inputRef} type="text" />
                    <input type="submit" onClick={ onClickHandler} />
                </div>
                <div>
                    {leaf && leaf.length > 0 &&
                        <LeafComponent items={leaf} />}
                </div>
        </div>)
}

问题：

[已编辑]

是否应该在按下“input”后重新加载（当前不重新加载）组件，因为它包含“setLeaf”方法并且“leaf”状态在LeafComponent items={leaf}上传递？我的代码中的错误在哪里？

【问题讨论】：

我的代码中一切正常。我只是想在问题中而不是在代码中将其加粗并意外删除
@Asaf Aviv 所以这是我的问题，为什么我的“返回”（组件）没有重新渲染，哈哈
我们也可以忘记 SearchChildren 方法我将简化代码（仍然不起作用）。
@Asaf aviv 现在看看这段没有 SearchChildren 方法的代码。还是不行
但首先它从 getTreeService 获取记录，因此它不为空。

标签： reactjs react-hooks

【解决方案1】：

当点击提交按钮时，您的组件正在呈现。

演示：

https://codesandbox.io/s/zealous-architecture-98zwf?file=/src/App.js

【讨论】：

【解决方案2】：

您需要在输入中使用 e.preventDefault 来阻止页面重新加载。

【讨论】：