Question

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

 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!')
            });
        }

我在做什么错了，错误是

不变违规：对象作为React子对象无效（发现：键为{_40，_65，_55，_72}的对象）

“有效网址”指向一个json文件，并且确实是一个对象，我正在尝试使用该数据将其与存储的其他数据进行比较，以使用if函数将决定是否呈现FlatList项或不是

<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
        }
    }

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

Answer 1

此：

具有键{_40，_65，_55，_72}的对象

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

相反，您可以尝试使用async函数表达式：

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
  })
}

或在调用.then时简单地使用AsyncStorage语法

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

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

React-Native;对象无效，不能作为反应子对象

1 个答案: