反应不渲染组件列表中的所有元素答案

【问题标题】：React not rendering all elements within a list of components反应不渲染组件列表中的所有元素
【发布时间】：2019-11-14 02:47:23
【问题描述】：

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

我使用了 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>
    </>
  );
}

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

【问题讨论】：

你错过了这一行中的一个括号： const [examples, setExamples] = React.useState([);

标签： reactjs

【解决方案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>
        </>
    )
}

【讨论】：