javascript - 为什么函数作为 React 子函数无效？

Question

所以我有这个组件来渲染商店中的列表(您可以从作为 Prop 获得的数据对象数组中看到它)。事实上，它确实有效。正是如此。

这里的问题是，每次组件或整个应用程序重新渲染时，我都会在终端中收到这些烦人的大错误。

这是组件:

    export default class CityList extends React.Component{

    render(){
        const citiesArr = this.props.data.map((city)=> {
            if(city !== undefined){
                return city.name;
            } else {
                return console.log('city is undefined');
            }
        });
        const getCity = this.props.getCity;
        const deleteCity = this.props.deleteCity;

        return(
        <Ulist>

            {citiesArr.map((city, index)=>{
                return (
                    <ListItemWrapper key={index}>
                        <ListItem  onClick={()=> getCity(city)}>
                            {city.toString()}
                        </ListItem>
                        <Button2 onClick={()=> deleteCity(city)}>X</Button2>
                    </ListItemWrapper>
                );
            })}
        </Ulist>
        );
    }
}

只是为了澄清由样式组件标签生成的内容:

Ulist = ul
ListItemWrapper = div
ListItem = li
Button2 = button

这是我每次收到的内容:

    index.js:2177 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by styled.div)
    in styled.div (at CityWeather.js:31)
    in CityWeather (at WeatherApp.js:41)
    in ul (created by styled.ul)
    in styled.ul (at WeatherApp.js:40)
    in div (created by styled.div)
    in styled.div (at WeatherApp.js:38)
    in WeatherApp (created by Connect(WeatherApp))
    in Connect(WeatherApp) (at index.js:25)
    in Provider (at index.js:24)
index.js:2177 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in li (created by styled.li)
    in styled.li (at CityWeather.js:32)
    in div (created by styled.div)
    in styled.div (at CityWeather.js:31)
    in CityWeather (at WeatherApp.js:41)
    in ul (created by styled.ul)
    in styled.ul (at WeatherApp.js:40)
    in div (created by styled.div)
    in styled.div (at WeatherApp.js:38)
    in WeatherApp (created by Connect(WeatherApp))
    in Connect(WeatherApp) (at index.js:25)
    in Provider (at index.js:24)

差不多就是这样了。我有预感，这和我的

citiesArr.map((城市，索引)=>

并且 allready 尝试将这部分声明为 const:

const Items = (function(){
            return(
                citiesArr.map((city, index)=>{
                    return (
                        <ListItemWrapper key={index}>
                            <ListItem  onClick={()=> getCity(city)}>
                                {city.toString()}
                            </ListItem>
                            <Button2 onClick={()=> deleteCity(city)}>X</Button2>
                        </ListItemWrapper>
                    );
                })
            );
        });

但它没有改变任何事情。这也是 CityWeather 组件:

export default class CityWeather extends React.Component{

    render(){
        const city = this.props.current;
        const temperature = ()=> {
            console.log(city.main.temp);
            if(city.main.temp){
                return city.main.temp-273;
            } else return 'No temp yet';
        };
        const cityName = ()=> {
            console.log(city.name);
            if(city.name){
                return city.name;
            } else return 'Noname';
        };
        const wind = ()=> {
            console.log(city.wind);
            if(city.wind){
                return city.wind;
            } else return 'No wind data yet';
        };
        return(

            <Li>
                <Day>{cityName}this name{city.name}</Day>
                {temperature} <br/>
                {wind}
                this data
            </Li>

        );
    }
}

Answer 1

我不确定上面的代码是导致错误的原因。使用该代码，Ulist 的子级将始终是一个数组。

我不确定每个城市的数据形状，但我怀疑该错误更有可能是由该行中的一些意外数据引起的。

{city.toString()}

尝试记录城市的值，以确保它符合您的预期。