Javascript 错误：对象作为React子对象无效，prop未在React Hook中返回

我在尝试下面的

返回（{info}）

时收到一个错误。我有一个

\u onClick

功能可以工作，如果我没有在返回中的任何地方包含

{info}

，我可以控制日志

info

。我怎样才能解决这个问题

以下是错误：

error:对象作为React子对象无效（找到：具有键{type、\u vectorTileFeature、properties、layer、source、state}的对象）。如果要呈现子对象集合，请改用数组。

更新 必须将对象转换为数组，然后映射键值，现在就可以工作了

const _onClick = event => {
  const display = event.features;
  if (display.length > 0) {
    setInfo(display[0].properties)
  }
}

var list = Object.entries(info).map(([key,value]) => {
  return (
    <div><span className="bold">{key}</span>: <span>{value.toString()}</span></div>
  )
});

return (
    <div id="info_side">{list}</div>
)

const\u onClick=event=>{
const display=event.features；
如果（display.length>0）{
setInfo（显示[0]。属性）
}
}
var list=Object.entries（info.map）（[key，value]）=>{
返回(
{key}:{value.toString（）}
)
});
返回(
{list}
)

原创帖子

const App = () => {
    const [viewport, setViewport] = useState({longitude: -98.58, latitude: 39.83, zoom: 3.5})
    const [locations, setLocations] = useState([])
    const [geojson, setGeojson] = useState(null)
    const [size, setSize] = useState({value: "All"})
    const [info, setInfo] = useState([]) 

    useEffect(() => {
        setLocations(geodata)
        _updateLocationData(size.value)
    }, [locations]);

    useEffect(() => {
        setInfo(info);
    }, [info]);

    const _updateViewport = viewport => {
        setViewport(viewport)
    }

    const _updateData = event => {
        setSize({value: event.target.value})
        _updateLocationData(event.target.value)
    }

    const _updateLocationData = (sizeValue) => {   
        var tempLocations = [];
        locations.forEach(function(res) {
            if (sizeValue === "All") {
                tempLocations.push(res);
            } else if (res.Size === sizeValue) {
                tempLocations.push(res);
            }
        });
        var data = {
            type: "FeatureCollection",
            features: tempLocations.map(item => {
                return {
                    id: ...,
                    type: "Feature",
                    properties: {
                        Company: item.Company,
                        Address: item.Address,
                        Phone: item.Phone,
                        Long: item.Long,
                        Lat: item.Lat,
                        Size: item.Size,
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [item.Long, item.Lat]
                    }
                };
            })
        };
        setGeojson(data);
    }

    const _onClick = event => {
        const { features } = event;
        const info = features && features.find(f => f.layer.id === 'icon');
        setInfo(info); // Error: Objects are not valid as a React child (found: object with keys {type, _vectorTileFeature, properties, layer, source, state}). If you meant to render a collection of children, use an array instead.
        console.log(info) // I can see the object with no error here if I do not add {info} in return ( <div id="info_side">{info}</div> )
    }

    return (
      <div className="App">
        <div className="inner-left map-container">
          <ReactMapGL
                {...viewport}
                onViewportChange={_updateViewport}
                width="100%"
                height="100%"
                mapStyle={mapStyle}
                mapboxApiAccessToken={TOKEN}
                onClick={_onClick}>

                <Source id="my-data" type="geojson" data={geojson}>
                    <Layer {...icon} />
                </Source>

                <div style={navStyle}>
                  <NavigationControl onViewportChange={_updateViewport} />
                  <select onChange={_updateData} defaultValue={size.value}>
                      <option value="All">All</option>
                      <option value="Large">Large</option>
                      <option value="Medium">Medium</option>
                      <option value="Small">Small</option>
                      <option value="Very Small">Very Small</option>
                  </select>
              </div>
          </ReactMapGL>
        </div>
        <div className="inner-right info-container">
          <Nav />
          <Search />
          <div id="info_side"> // where is error is thrown if I have {info} below
            <div className="company">{info.properties.Company}</div> 
            <div className="address">{info.properties.Address}</div>
            <div className="phone">{info.properties.Phone}</div>
          </div>
        </div>
      </div> 
    );
}

export default App;

const-App=（）=>{
const[viewport，setViewport]=useState（{经度：-98.58，纬度：39.83，缩放：3.5}）
const[locations，setLocations]=useState（[]）
const[geojson，setGeojson]=useState（null）
const[size，setSize]=useState（{value:“All”}）
const[info，setInfo]=useState（[]
useffect（（）=>{
设置位置（地理数据）
_updateLocationData（size.value）
}，[地点]；
useffect（（）=>{
setInfo（info）；
}，[信息]；
const\u updateViewport=视口=>{
设置视口（视口）
}
const_updateData=event=>{
setSize（{value:event.target.value}）
_updateLocationData（event.target.value）
}
常量updateLocationData=（sizeValue）=>{
var-templations=[]；
位置。forEach（功能（res）{
如果（sizeValue==“全部”）{
模板定位。推（res）；
}else if（res.Size==sizeValue）{
模板定位。推（res）；
}
});
风险值数据={
类型：“FeatureCollection”，
特性：templations.map（项=>{
返回{
id:。。。，
键入：“功能”，
特性：{
公司：项目公司，
地址：项目地址：，
电话：物品，电话，
长：项目，长，
Lat：项目。Lat，
尺寸：项目。尺寸，
},
几何图形：{
键入：“点”，
坐标：[item.Long，item.Lat]
}
};
})
};
setGeojson（数据）；
}
const\u onClick=event=>{
const{features}=事件；
const info=features&&features.find（f=>f.layer.id==='icon'）；
setInfo（info）；//错误：对象作为React子对象无效（找到：具有键{type、\u vectorTileFeature、properties、layer、source、state}的对象）。如果要呈现子对象集合，请改用数组。
console.log（info）//如果我不在返回中添加{info}（{info}），我可以在这里看到没有错误的对象
}
返回(
全部的
大的
中等
小的
非常小
//如果下面有{info}，则抛出错误
{info.properties.Company}
{info.properties.Address}
{info.properties.Phone}
);
}
导出默认应用程序；

信息是一个对象，因此不能执行以下操作：

<div id="info_side">{info}</div>

{info}

每次在React中的DOM元素内使用{}时，{}内的变量必须是字符串、数字或布尔值。因此，您必须确保在括号内使用基本体

---

请尝试

{JSON.stringify（info）}

或任何您想要的变量，您将看到该值的字符串表示形式。

是否可以包含“info.properties”的数据结构？更新了原始post当您使用控制台时，它会打印什么？它是否返回html或数组（根据错误消息）？谢谢，这很有帮助。最后，我将对象转换为数组，并能够控制显示数据。