Question

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

[已编辑]

我的代码：

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}上传递？我的代码中的错误在哪里？

Answer 1

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

Answer 2

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

演示：

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

React 不使用 setState 重新渲染组件

2 个答案: