将数据传递给 React 映射函数

Question

我在将数据传递给地图函数时遇到了一些问题，我不确定哪里出了问题。

我在安装组件时获得了所有用户，但是在我获得用户之后我试图添加一个常量。这一切都有效，但是在构造函数中，当我尝试映射数组时，它似乎没有接收到它。

class UserManagement extends Component {

    fetchUsers() {
        axios.get('http://apiyall.com/users')
            .then(res => {
                const dataTable = res.data;
            })
            .catch(err => console.log(err));
    }

    componentDidMount() {
        this.fetchUsers();
    }

    constructor(props) {
        super(props);
        this.state = {
            data: dataTable.map((prop, key) => {

Answer 1

构造函数在 ComponentDidMount 之前被调用。所以，你不能指望构造函数中的数据表的值，因为它是在那之后设置的。

您可以使用 this.setState 在 componentdidmount 中设置状态，并在构造函数中初始化状态。

Answer 2

constructor在组件生命周期中只执行一次，在组件mounts时。之后你需要使用 setState 来改变 state.

在constructor中你只能初始化这样的状态，

constructor(props) {
    super(props);
    this.state = {
        data: []
    }
}

在您的 fetchUsers 函数中，您需要实际设置 state、

fetchUsers() {
    axios.get('http://apiyall.com/users')
    .then(res => {
        this.setState({data: res.data})  //set the state here.
    })
    .catch(err => console.log(err));
}

Answer 3

构造函数在组件生命周期中只在componentDidMount之前执行一次。在构造函数中，您可以初始化状态并绑定函数。如果你想用 'map' 函数迭代数组，你应该从 props.

接收数据

您应该按如下方式更改代码：

constructor(props) {
    super(props);
    this.state = {
        data: []
    }
}

componentDidMount() {
    this.fetchUsers();
}

fetchUsers() {
    axios.get('http://apiyall.com/users')
    .then(res => {
        this.setState({data: res.data})  //set the state here.
    })
    .catch(err => console.log(err));
}

render() {
    this.state.data.map(() => {...});
}

将数据传递给 React 映射函数

Passing data to a react map function

reactjs

react-table