Question

我试图遍历数组并为数组中的每个项创建<View><Text>this item</Text><View>，将它们添加到一起，并将setState设置为变量，以便更新页面上的列表。

我能够遍历数组并在页面上为数组中的每个项创建简单的文本条目。我还可以创建一个<View><Text>this item</Text></View>并更新页面。但是，当我尝试将两者放在一起时（将文本格式化并将它们组合在一起），我得到每个项目的[object] [Object]。

    var schedule = getUserSchedule(this.state.apiToken).then(resp => {
        if(resp.status == 'success'){
                if(resp.schedule[0].length>0)
                {
                    console.log('Got user scheduling entries: ', resp.schedule[0]);
                    resp.schedule[0].map((data) => {
                        var currentSchedule = this.state.userSchedule;
                        var thisEntry = <View style={{width : Metrics.screenWidth - 80 , height : 35,flexDirection : 'row', alignItems : 'center', justifyContent : 'center'}}><Text style={{color : 'white', fontSize : 16}}> + data.key + </Text></View>;
                        //var thisEntry = data.key;  (THIS WORKS)
                        var newSchedule = currentSchedule + thisEntry;
                        this.setState({
                              userSchedule:newSchedule
                            });
                    }); 
                } else {
                    Alert.alert('Success','null');
                }
        } else {
                Alert.alert('Error',resp.error);
        }
    });

Answer 1

您可以尝试这样的事情：

const mappedSchedule = resp.schedule[0].map(data => <View key={data.key}><Text>{data.key}</Text></View>)
this.setState({ userSchedule: mappedSchedule })

这将创建您的日程安排的地图。你可以把它放在州内。

如果您想要修改地图中的某些值，则完整版将如下所示:(以某种方式或形式）

const mappedSchedule = resp.schedule[0].map((data) => { 
    let value= <View key={data.key}><Text>{data.key}</Text></View>;

    // Do some stuff

    return value;
  }
)
this.setState({ userSchedule: mappedSchedule })

Answer 2

正如评论中所指出的，您无法使用array + component向数组添加组件。
在地图内部更新状态导致每次迭代重新渲染，而不是计算所有组件并在最后更新状态可能也不是一个好主意。
.map用于更新数组中的值，而不是其副作用。如果使用副作用可能应该使用forEach，但这里.map很好，但之后会将更改移到。

尝试以下方面的内容：

if (resp.status == 'success') {
  if (resp.schedule[0].length > 0) {
    console.log('Got user scheduling entries: ', resp.schedule[0]);
    var newSchedule = resp.schedule[0].map(data => {
      return(
      <View
        style={{
          width: Metrics.screenWidth - 80,
          height: 35,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
       <Text style={{ color: 'white', fontSize: 16 }}>{data.key}</Text>
      </View>
    );
  });

  this.setState({
    userSchedule: [...this.state.currentSchedule, newSchedule]
  });
}

Answer 3

您需要分两步完成此操作。

1）获取数据并将数据保存到组件的状态。

2）在您的组件渲染方法中，映射数据以创建您的UI。

    export default class UserSchedule extends React.PureComponent {

    constructor() {
        super();
        this.state = {
            userScedule: null
        };
    }

    componentDidMount() {
        const token = this.state.apiToken;
        this.fetchUserSchedule(token);
    }

    /**
     * @returns {Promise}
     */
    fetchUserSchedule(apiToken) {
        return getUserSchedule(apiToken).then(res => {
            if (res.status == 'success') {
                if (res.schedule[0].length > 0) {
                    const userSchedule = res.schedule[0];
                    this.setState({userSchedule});
                    return
                } else {
                    Alert.alert('Success', 'null');
                }
            } else {
                Alert.alert('Error', resp.error);
            }
            this.setState({userSchedule: null});
        });
    }

    render() {
        const {userSchedule} = this.state;
        return (
            <div>
                {userSchedule &&
                userSchedule.map(schedule => (
                    <View
                        key={schedule.id}
                        style={{
                            width: Metrics.screenWidth - 80,
                            height: 35,
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <Text style={{color: 'white', fontSize: 16}}> + data.key + </Text>
                    </View>
                ))
                }
            </div>
        )
    }
}

React Native - 使用map（）迭代数组以更新this.state.variable

3 个答案: