React-Native;对象无效，不能作为反应子对象 [英] 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!')
            });
        }

我在做什么错了，错误是

What am I doing wrong, The error is

不变违规:对象作为React子对象无效(发现:键为{_40，_65，_55，_72}的对象)

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

有效网址"指向一个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!

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