Question

我有一个系统，在该系统中，当用户按下按钮时，新组件将被推送到组件列表中，并且状态将被更新。我使用{}渲染了组件列表，但是只渲染了第一个元素。

我使用console.log来确保我的列表实际上正在更新。到目前为止，我针对该问题所见的所有问题都涉及到使用扩展React.Component的类。由于我使用的是函数渲染，因此看不到如何使用这些解决方案

export default function ExampleManager() {

    const [examples, setExamples] = React.useState([<Example key={0}/>);

    function handleClick() {
        examples.push(<Example key={examples.length}/>);
        setExamples(examples);
    }

  return (
    <>
        {examples}
        <Button variant="outlined" color="primary" onClick={handleClick}>
            Add Example
        </Button>
    </>
  );
}

如果要多次单击按钮，我希望会有多个示例组件，但是目前只有第一个元素有效

Answer 1

据我所知，examples是不可变的，不会通过使用examples.push()进行更新。

更改您的handleClick到以下代码，以删除您的example变量的引用：

function handleClick() {
        // create a new array to prevent referencing the old on
        setExamples([
            ...examples,
            <Example key={examples.length}/>
        ]);
    }

尽管如此，您不应该将本身的组件添加到阵列中。尝试按以下方式拆分值及其表示形式：

function ExampleManager() {
    const [examples, setExamples] = React.useState([0]);

    const handleClick = () => setExamples([...examples, examples.length])
    return (
        <>
            {examples.map((item, key) => <Example key={key} data={item} />)}
            <Button variant="outlined" color="primary" onClick={handleClick}>
                Add Example
            </Button>
        </>
    )
}

反应不呈现组件列表中的所有元素

1 个答案: