Question

所以我有这个组件来从商店中呈现一个列表（你可以从作为props获得的数据对象数组中看到它）。事实上，它的工作原理。完全应该如此。

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

以下是组件：

    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((city, index)=>

并且已经尝试将此部分声明为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的数据形状是什么，但我怀疑错误更可能是由于此行中出现了一些意外数据造成的。

{city.toString()}

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

Answer 2

从我尝试传输为道具的数据中删除了函数。它帮了！现在他们看起来就像这样：

const city = this.props.current;
        const temperature = city.main? city.main : 'no temperature yet';
        const cityName =  city.name ? city.name : 'no name yet';
        const wind =  city.wind ? city.wind : 'no wind yet';
        return(

            <Li>
                <Day>{cityName}</Day>
                Temperature: {temperature.toString()} <br/>
                Wind speed: {wind.toString()} <br />
            </Li>

        );

没有完全解决我的问题，它仍然传递对象而不是数据，但这是我可以为自己解决的问题。感谢所有有用的评论家！保持敏锐。

为什么函数不能作为React孩子？

2 个答案: