Question

我有一个基本上可以生成动态dom的函数，如下所示：

const arrMarkup = [];
const getMarkup = () => {
    {
        if(true){
                arrMarkup.push(<Accordion expanded={expanded === cust.name} onChange={handleChange(cust.name)}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1bh-content"
                        id="panel1bh-header"
                    >
                        <Typography className={salesEvent.name && classes[salesEvent.name]}></Typography>
                    </AccordionSummary>
                </Accordion>
                )
            })
        })
    }
return <div>{arrMarkup}</div> ;
}

现在，我正在尝试在useEffect上执行以下功能

useEffect(() => {
    getMarkup();
}, [cust]);

，并尝试添加JSX作为

  return (
      <div>
        {arrMarkup}
      </div>
  )

但是看不到添加的标记，但是我可以看到它在数组arrMarkup中添加了。怎么了？

Answer 1

仅当组件的状态或道具更改时，React才会重新渲染。据您所知，arrMarkup既不是州议员也不是支持者。（如果是，则直接修改它会违反React规则，因为您不能直接修改状态或道具。）

很难在没有更多信息的情况下告诉您该怎么做，但是您可能希望arrMarkup成为状态成员，例如（在使用钩子的功能组件中）：

const [arrMarkup, setArrMarkup] = useState([]);

，然后进行适当的更新，例如：

setArrMarkup(current => [...current, <NewStuff>goes here</NewStuff>]);

请注意，我使用了状态设置程序的回调版本。当您基于现有状态更新状态时，这一点很重要，因为状态更新可能是异步的并且可以分批处理（因此，您已经拥有的状态信息可能会过时）。

FWIW，还有其他一些观察结果：

将useEffect依赖项设为cust（据我所知是单个对象）并触发效果会增加一个条目到具有先前条目的数组中，这是很不寻常的cust的先前值（显然），您将不再以任何状态存储在组件状态中。没有更多的上下文，这简直让人感到不适。
您尚未显示handleChange的定义，但是onChange={handleChange(cust.name)}似乎不正确。它调用 handleChange，传入cust.name，并将其返回值用于更改处理程序。您是说onChange={() => handleChange(cust.name)}，以便在事件发生时调用handleChange吗？

动态创建的DOM未显示在组件中

1 个答案: