我有一个Autocomplete分量显示的状态array.但当我 Select 一个状态时,我应该呈现一个依赖于所选状态的组件. 不会呈现任何内容,但会在代码中 Select 状态.

该组件如下所示

import { Autocomplete, TextField } from '@mui/material';

import styles from './/styles.module.css';
import { useState } from 'react';

type JSXElement = any;

const statesString = [
  'Acre',
  'Alagoas',
  'Amazonas',
  'Brasília Distrito Federal',
  'Ceará',
  'Espírito Santo',
  'Goiás',
  'Maranhão',
  'Mato Grosso',
  'Mato Grosso do Sul',
  'Minas Gerais',
  'Pará',
  'Paraíba',
  'Paraná',
  'Pernambuco',
  'Piauí',
  'Rio de Janeiro',
  'Rio Grande do Norte',
  'Rio Grande do Sul',
  'Roraima',
  'Santa Catarina',
  'São Paulo',
  'Sergipe',
  'Tocantins',
];

const locations = [
  {
    name: 'Acre',
    locations: [
      {
        name: 'Aeroporto de Rio Branco',
        address:
          'Avenida Plácido de Castro – Vila Aeroporto – Rio Branco CEP: 69923-900 AC Telefone: 68-3211-1000',
        lat: -9.98417,
        lng: -67.88333,
      },
    ],
  },
];

export default function SearchBar() {
  const [selectedState, setSelectedState] = useState('');

  function renderSelectedStateWithMap(stateName): JSXElement {
    console.log(stateName);
    locations.map((state) => {
      console.log('state', state);
      if (state.name === stateName) {
        state.locations.map((location) => {
          return (
            <div className={styles.selectedStateContainer}>{location.name}</div>
          );
        });
      }
      return <></>;
    });
  }

  return (
    <div className={styles.searchBarContainer}>
      <Autocomplete
        disablePortal
        onChange={(event: any, newValue: string | null) => {
          setSelectedState(newValue);
        }}
        id="combo-box-demo"
        options={statesString}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Escolha o Estado" />
        )}
      />
      {renderSelectedStateWithMap(selectedState)}
    </div>
  );
}

即使map()发现状态,renderSelectedStateWithMap也不返回<div>.

推荐答案

您没有返回renderSelectedStateWithMap函数中的任何元素.因此,您需要返回结果元素.

例如:

function renderSelectedStateWithMap(stateName): JSXElement {
  return (
    <>
      {locations
        .filter((state) => state.name === stateName)
        .map(({ locations }) =>
          locations.map((location, locationIdx) => (
            <div key={`location-id-${locationIdx}`}>{location.name}</div>
          ))
        )}
    </>
  );
}

您可以看到整个示例here.

Javascript相关问答推荐

容器如何更改默认插槽中子项的显示?

无法将nPM simplex-noise包导入在JS项目中工作

具有相同参数的JS类

Vega中的模运算符

在Angular中将样式应用于innerHTML

使用JavaScript重新排序行

嵌套异步JavaScript(微任务和macrotask队列)

函数返回与输入对象具有相同键的对象

Mongoose post hook在使用await保存时不返回Postman响应

Reaction Native中的范围滑块

在使用REACT更改了CSS类之后,无法更改CSS样式

未捕获的运行时错误:调度程序为空

如何修复使用axios运行TSC index.ts时出现的错误?

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

如何缩小函数中联合返回类型的范围

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

:host::ng-Deep不将样式应用于material 复选框

响应,Use Callback更新状态变量,该变量也存在于其依赖数组中,它如何防止无限重新呈现?

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:Object.在Reaction项目中