使用.map()错误ReactJS循环遍历this.state的值

时间:2018-01-21 20:28:07

标签: javascript reactjs

完成初学者反应.JS。我试图循环#include "stdafx.h" #include "mpi.h" #include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stack> using namespace std; int main(int argc, char *argv[]) { int numprocs, rank; char buffer[100] = { 0 }; MPI_Init(&argc, &argv); MPI_Comm_rank(MPI_COMM_WORLD, &rank); MPI_Comm_size(MPI_COMM_WORLD, &numprocs); MPI_Status status; MPI_File fh; MPI_Offset size; int char_number; const char plik[10] = "file.txt"; MPI_File_open(MPI_COMM_WORLD, plik, MPI_MODE_RDONLY, MPI_INFO_NULL, &fh); MPI_File_get_size(fh, &size); MPI_File_set_view(fh, rank*(size / numprocs), MPI_CHAR, MPI_CHAR, "native", MPI_INFO_NULL); MPI_File_read(fh, buffer, (size/numprocs), MPI_CHAR, &status); char_number = MPI_File_get_size(fh, &size); MPI_File_close(&fh); if (rank == 0) { for (int i = 0; i < numprocs; i++) { MPI_Recv(&char_number, i, MPI_INT, 0, 1, MPI_COMM_WORLD, &status); } cout << "There is: " << char_number << " characters in file.txt"; } else { MPI_Send(&char_number, 0, MPI_INT, 0, 3, MPI_COMM_WORLD); } MPI_Finalize(); return 0; } 的值,我有问题。

this.state

//这里是问题出现的地方

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

  //assume this part has no issue
  // I added it just to make my work more understandable
 axios.get(this.props.source)
    .then((result) => {
    this.setState({
        stats: result 
      });

    });

我得到的错误是 render(){ return( {this.state.stats.map(function(val,res){ console.log(val) })}) }

2 个答案:

答案 0 :(得分:1)

似乎你认为stats不是数组。对于验证,我建议在使用之前添加Array.isArray(this.state.stats)。我还建议在初始化此变量时使用调试器,以确保它将保持为数组。

答案 1 :(得分:0)

我认为你错过了一些重要的事情。将异步请求放入ComponentDidMount方法中是个好主意。

  

componentDidMount()在组件出现后立即调用   安装。需要DOM节点的初始化应该放在这里。如果你   需要从远程端点加载数据,这是一个好地方   实例化网络请求

另外,最好先检查一下你的stats变量是否存在。

以下是一个完整的例子:

class CustomComponent extends React.Component {
  constructor (props) {
    super(props);

    this.state = { 
      stats: [] 
    };  
  } 

  componentDidMount () {
    this.setState({stats: [1,2,3,4]})
  }

  render () {
    const { stats } = this.state
    return (
      <div>
        {stats && stats.map((val,res) => {
          console.log(val)
        })}
      </div>
    )
  }
}


ReactDOM.render(
  <CustomComponent />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

有关componentdidmount的更多信息:https://reactjs.org/docs/react-component.html#componentdidmount

相关问题