Question

在我的状态我有一个数组。

this. state = {people : [] , show : false }

我正在呼叫api并接收数据。接收的数据就像数组中的某个对象。我如何将我的初始数组setState到这个新数组，并通过逐个映射来显示UI中的数据

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}
1
:
{name: "C-3PO", height: "167", mass: "75", hair_color: "n/a", skin_color: "gold", …}
2
:
{name: "R2-D2", height: "96", mass: "32", hair_color: "n/a", skin_color: "white, blue", …}
3
:
{name: "Darth Vader", height: "202", mass: "136", hair_color: "none", skin_color: "white", …}
4
:
{name: "Leia Organa", height: "150", mass: "49", hair_color: "brown", skin_color: "light", …}
5
:
{name: "Owen Lars", height: "178", mass: "120", hair_color: "brown, grey", skin_color: "light", …}
6
:
{name: "Beru Whitesun lars", height: "165", mass: "75", hair_color: "brown", skin_color: "light", …}
7
:
{name: "R5-D4", height: "97", mass: "32", hair_color: "n/a", skin_color: "white, red", …}
8
:
{name: "Biggs Darklighter", height: "183", mass: "84", hair_color: "black", skin_color: "light", …}
9
:
{name: "Obi-Wan Kenobi", height: "182", mass: "77", hair_color: "auburn, white", skin_color: "fair", …}
length
:
10
__proto__
:
Array(0)

///代码这是完整组件的代码.................................... .................................................. .................................................. .................................................. ..........................

import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  Text,
  View,
  Card,

} from 'react-native';

import { connect } from 'react-redux'

import { fetchPeopleFromAPI } from './actions'



class App extends Component {

  constructor(props){

    super(props);

    this.state = { peoples : [] , show : false }

  }

  componentWillReceiveProps(newProps) {

    console.log('compsonentWillReceiveProps............ from Api');

     console.log(newProps)

     console.log(newProps.people.peopleReducer.people)

     var arr = newProps.people.peopleReducer.people

    console.log("new peoples state --------- ", arr)


     this.setState({ peoples:  arr  })


    console.log("new peoples state --------- ", this.state.peoples)

  }


  getpeople = () => {

    this.props.dispatch(fetchPeopleFromAPI())

  }

  render() {

    return (

      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TouchableHighlight style={styles.button} onPress={ this.getpeople } >
          <Text style={styles.buttonText}>Load People</Text>
        </TouchableHighlight>

      </View>



    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    height: 60,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0b7eff'
  },
  buttonText: {
    color: 'white'
  }
});


function mapStateToProps(state) {
  return {
    people: state
  }
}

export default connect(mapStateToProps)(App)

Answer 1

你的意思是

this.setState({
    people: newProps.people.peopleReducer.people
});

如果您要在render内使用

进行分配

this.state.people = newProps.people.peopleReducer.people;

您可以在render方法中直接分配到州。但是如果必须从其他事件设置状态，则需要调用setState方法，该方法最终会在设置状态后调用render。

Answer 2

首先，您需要在组件中的某个地方调用getPeople函数

最佳去处是

componentDidMount(){
   getPeople();
}

然后在这个getPeople函数中调用this.props.fetchPeopleFromAPI。但是现在没有mapDispatchToProps可以做到这一点。

所以在连接功能之前，如果可以添加

const mapDispatchToProps = dispatch => {
return {
    fetchPeopleFromAPI: () => {
      dispatch(fetchPeopleFromAPI())
    }
  }
}

最后，您可以修改connect并传递新添加的mapDispatchToProps。

export default connect(mapStateToProps, mapDispatchToProps)(App)

因为您要将商店状态映射到组件的道具

function mapStateToProps(state) {
 return {
    people: state.people.peopleReducer.people // Try doing the hierarchy here
  }
}

因此，至少不需要在这里添加componentWillReceiveProps。而是将render中的人员作为this.props.people访问，因为您已将其映射到上面的道具。

所有这些都是基于您的行动和减速器正常运作。

Answer 3

componentWillReceiveProps(newProps) {
  let { people } = newProps.people.peopleReducer;
  this.setState({
    people 
  }); 
}

如何将状态数组的stateState设置为react Js中的新数组

3 个答案: