Reactjs Jest：添加元素后未映射功能组件数组列表

我试图通过单击onClick函数来添加空对象来列出人物，以便地图可以循环 over和show div。我看到prop onclick函数调用工作正常，但map并没有在上面循环

如果你能帮我一点忙，我将不胜感激

// functional component

    const listing = ({list=[]}) => (
    <>
        {
        <div id='addPerson'  onClick={() => list.push({})}>Add person</div>}

        {list.map((element, index) => (
        <div key={index} className='listItems'>
            <p>list name</p>            
        </div>
        ))}
    </>
    );

    export default listing;

// test case

it('renders list-items', () => {
 const wrapper = shallow(<listing />);
 wrapper.find('#addPerson').prop('onClick')();
 console.log(wrapper.find('.listItems').length); // showing zero, expected 1
});

//功能组件
常量列表=（{list=[]}）=>(
{
list.push（{}}>addperson}
{list.map（（元素，索引）=>(
列表名称

))}
);
导出默认列表；
//测试用例
它（'呈现列表项'，（）=>{
常量包装器=浅（）；
wrapper.find（'#addPerson'）.prop（'onClick'）（）；
console.log（wrapper.find（'.listItems'）.length）；//显示零，应为1
});

更新列表不会导致组件重新渲染。我不确定列表来自何处，但我假设它来自父级中的本地州，或者可能来自redux商店。从组件内部，您必须调用父级中的函数来更新那里的列表数组

下面是组件的一个版本，假设列表位于您的本地州。您必须调整代码以更新父存储区或redux存储区中的状态，但是下面的内容应该足以让您知道该怎么做。另外，不要将元素推送到数组，因为它会改变对象，并且不会接触重新渲染

const Listing = ({list = [], addToList}) => {
  return <>
    {
      <div id='addPerson' onClick={() => addToList({})}>Add person</div>}

    {list.map((element, index) => (
      <div key={index} className='listItems'>
        <p>list name</p>
      </div>
    ))}
  </>
};

const list=（{list=[]，addToList}）=>{
返回
{
addToList（{}）}>addPerson}
{list.map（（元素，索引）=>(
列表名

))}
};

谢谢阿披实，你的假设是正确的。在这里，我们使用的是早期版本的react，是否可以在不使用挂钩的情况下在功能组件中重新加载？您不需要在同一组件中拥有状态，这只是出于演示目的。确切的解决方案将取决于您的应用程序。我想说的一点是，你必须更新状态中的列表（无论它在哪里），而不是更新你作为道具得到的列表。我已经更新了我的示例代码，为你提供了更多的帮助。谢谢，我明白了你的意思，因为函数组件没有重新渲染。谢谢你的提示。