反应原生；对象作为反应孩子无效 [英] React-Native; Objects are not valid as a react child

问题描述

我在 dataSource: responseJson.event_array 处遇到错误，当我删除此行时一切正常，但是，当我将它与其他人的代码进行比较时，它是相同的.它确实到达了服务器，因为我没有收到警报消息.

I'm getting an error at dataSource: responseJson.event_array, when I remove this line everything works fine however, when I compare it to other peoples code it's the same. It does reach the server, because I do not get the alert message.

 componentDidMount() {    
            fetch('valid url')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson.event_array,
                    isLoading: false
                });
            })
            .catch((error) => {
                alert('Could not reach the server!')
            });
        }

我做错了什么，错误是

Invariant Violation:对象作为 React 子对象无效(发现:带键的对象 {_40,_65,_55,_72})

Invariant Violation: Objects are not valid as a React child (found: object with keys {_40,_65,_55,_72})

'valid url' 指向一个 json 文件并且确实是一个对象，我正在尝试使用数据将其与存储的其他数据进行比较，以使用 if 函数来决定是否呈现 FlatList 的项目或不是

'valid url' points to a json file and is indeed an object, I'm trying to use the data to compare it to other data stored to use a if function wich will decide wether the item of FlatList will be rendered or not

<FlatList
                data={this.state.dataSource}
                renderItem={this.renderItem}
                keyExtractor={item => item.name}
            />

另一段代码

renderItem = async ({item}) => {
        var approved = false;

        var name_string = await AsyncStorage.getItem('planner_name');

        if(name_string != null){
            var name_array = name_string.split(',');

            name_array.map(name => {
                if(name == item.name){
                    approved = true;
                }
            })
        }


startReading = ({item}) => {
    this.setState({
        reading: true,
        item: item
    });
}
        if(approved){
            return (
                <TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startReading({item})}>
                    <Text>{item.name}</Text>
                </TouchableOpacity>
            );
        } else {
            return null
        }
    }

如果您有任何问题，请随时提出.感谢您的宝贵时间.

If you have any question feel free to ask. Thank you for your time.

推荐答案

这个:

带有键 {_40,_65,_55,_72} 的对象

object with keys {_40,_65,_55,_72}

是一个未解决的承诺.我怀疑问题是 this.renderItem 是一个 async 函数，我怀疑这是不允许的.async 本质上是将函数的结果包装在 Promise 中，然后必须解决它.由于 renderItem 不期望 Promise，它不知道如何解决一个，因此只是为每个项目返回一个未解决的 Promise 对象您的数据源.

is an unresolved promise. I suspect the issue is that this.renderItem is an async function which I suspect is not allowed. async is essentially going to wrap the result of your function in a Promise, which then must be resolved. Since renderItem does not expect a Promise, it does not know to resolve one and as such is simply returning an unresolved Promise object for each item in your data source.

您可以尝试使用 async 函数表达式:

Instead you could try using an async function expression:

renderItem = ({item}) => {
  const get_name_string = async function(key){
    const name_string = await AsyncStorage.getItem('key')
    return name_string
  }
  get_name_string('planner_name').then(name => {
    // the rest of your renderItem function should be in this block
  })
}

或者只是在调用 AsyncStorage

renderItem = ({item}) => {
  AsyncStorage.getItem('planner_name').then(name => {
  // again, the rest of your function should be in this block
  })
}

或者更好的是找到另一个不需要您在 renderItem 函数中使用异步代码的模式.希望对您有所帮助，如果您有任何问题，请告诉我！

or better yet find another pattern that doesn't require you to use asynchronous code in your renderItem function. Hope this helps, let me know if you have any questions!

这篇关于反应原生；对象作为反应孩子无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！