React 在控制台中显示值但不渲染它们

Question

我正在尝试根据另一个选择加载一个选择的选项。我从数组中提取数据（稍后会有更多数据）。

我的问题是我无法呈现第二个选择。我正确过滤了数据，但未添加选项。在代码的两个“console.log”中，可以看到我注释掉了，结果在console中显示。

知道我失败了什么吗？我是反应新手。如果代码非常糟糕，我深表歉意！欢迎任何帮助。

附：我不知道在这种情况下是否有什么不同，但我使用的是“Ant Design”。

import React, { useState } from 'react';
import { Row, Col, Form, Select, Input } from 'antd';


export default function SelectPetZone(props) {
    const { publicationData, setPublicationData } = props;
    const { Option } = Select;

    const arrayZones = [
      {
        departmentName: "Montevideo",
        neighborhood: ['Centro', 'Cordón', 'Flor de Maroñas', 'Manga']
      },
      {
        departmentName: "Canelones",
        neighborhood: ['Las Piedras', 'El Dorado', 'Progreso', 'La Paz']
      }
    ];

    const optionsDepartments = [];
    const [optionsNeighborhood, setoptionsNeighborhood] = useState([]);


    for(const item of arrayZones) {
        optionsDepartments.push(<Option key={item.departmentName} value={item.departmentName}> { item.departmentName } </Option>);
    }


    const chargeNeighborhood = e => {
        // Set department
        setPublicationData({ ...publicationData, department: e });

        // Load neighborhood
        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); 
                    setoptionsNeighborhood(...optionsNeighborhood, <Option>{j}</Option>);
                    
                }            
            }
        }
    }



    return (
        <>
            <Row>
                <Col lg={6}>
                    <Form.Item>
                        <Select placeholder='Departamento' onChange={chargeNeighborhood} value={publicationData.department} >
                            {optionsDepartments}
                        </Select>
                    </Form.Item>
                </Col>
                <Col lg={6} offset={3}>
                    <Form.Item>
                        <Select placeholder='Barrio' onChange={e => setPublicationData({ ...publicationData, neighborhood: e })} value={publicationData.neighborhood} >                            
                            {optionsNeighborhood}
                        </Select>
                    </Form.Item>
                </Col>                
            </Row>
        </>
    )
}

Answer 1

在反应中，我们有一个叫做UseState()的东西 首先，

import React, { useState } from 'react';

然后改变

const optionsNeighborhood = [];

到

const [optionsNeighborhood, setoptionsNeighborhood] = useState([])

然后改变

        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); // ==>  Print the correct data                  
                    optionsNeighborhood.push(j);
                }            
            }
        }

到

        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); // ==>  Print the correct data                  
                    setoptionsNeighborhood([...optionsNeighborhood, j]);
                }            
            }
        }