0
307
ViewsLos objetos no son válidos como hijos de React. Si tenía la intención de representar una colección de niños, use una matriz en su lugar. ¿Cómo devolverlo?
Por lo que he estado leyendo, el error se genera al intentar imprimir '{menu.props.options[0]}'. Entiendo que no puedo devolverlo así ya que tengo que envolverlo en un objeto o matriz.
El código en cuestión es:
return ( <Select labelInValue filterOption={ false } showArrow suffixIcon={ <SearchOutlined /> } onSearch={ debounceFetcher } notFoundContent={ fetching ? <Spin size="small" /> : null } { ...props } className="search-repeated-words" dropdownRender={menu => ( <div> {menu.props.options[0]} <div style={{ padding: "0 12px", height: 30, lineHeight: "30px", color: "#46C4C1" }} > Sugerencias </div> <Divider style={{ margin: 5 }} /> {menu} </div> )} > { options.map((option, index) => ( <Select.Option key={index} value={option.text}> <span>{option.text}</span> </Select.Option> ) ) } </Select>¿Qué solución puedo implementar?
menu.props.options[0] = objeto: 
El error se genera cuando quiero imprimir o mostrar {menu.props.options[0]} en la pantalla. ¿Cómo podría mostrarlo?
3 answers
Answer question0
Supongo que {menu.props.options[0]} es un objeto. Solo debe mostrar la propiedad relevante de este objeto, con un tipo primitivo (una cadena, por ejemplo) como menu.props?.options?.[0]?.label
0
Si el error se genera al intentar renderizar
{menu.props.options[0]}entonces significa que menu.props.option[0] es un tipo de objeto y debe representarlo como
<div>{menu.props.options[0].title} {menu.props.options[0].description}</div>(dependiendo de las propiedades en las que consiste el objeto)
o si por alguna razón desea representar un objeto tal como está:
<div>{ JSON.stringify(menu.props.options[0]) }</div>0
Cree una función auxiliar (u otro componente) que pueda representar los datos de la option . A continuación, he creado uno etiquetado como OptionCell que se usa tanto para representar el primer elemento como para toda la matriz de opciones:
const OptionCell = (option) => ( <Select.Option key={index} value={option.text}> <span>{option.text}</span> </Select.Option> ) return ( <Select labelInValue filterOption={ false } showArrow suffixIcon={ <SearchOutlined /> } onSearch={ debounceFetcher } notFoundContent={ fetching ? <Spin size="small" /> : null } { ...props } className="search-repeated-words" dropdownRender={menu => ( <div> {<OptionCell options={menu.props.options[0]} />) <div style={{ padding: "0 12px", height: 30, lineHeight: "30px", color: "#46C4C1" }} > Sugerencias </div> <Divider style={{ margin: 5 }} /> {menu} </div> )} > { options.map((option, index) => ( <OptionCell options={options} key={index} /> ) } </Select> )