reactjs - 数据显示在控制台中但不在屏幕中 - reactjs

Question

如果我可以在控制台中看到数据，为什么我在映射到“this.state.viciados”时看不到屏幕中的数据？我在堆栈溢出中看到了这个问题，但该问题中的唯一答案不起作用。

class App extends Component {
  constructor(props) {
super(props);
this.state = {
  viciados: []
}

}


componentDidMount() {
this.getViciados();
}

 getViciados = _ => {
fetch("http://localhost:3000/dependentes")
  .then(response => response.json())
  .then(response => {
    this.setState({ viciados: response.data })
    //console.log(response.data);
  })
  .catch(err => console.log(err));
}



render() {


 const viciados = this.state.viciados.map(viciado => {
  console.log(viciado['id_viciados'], viciado["nome_viciado"]);
  <div key={viciado['id_viciados']}>{viciado["nome_viciado"]}</div>
});
return (
  <div className="App">
    {viciados}
  </div>
);
}
}

export default App;

标签： reactjs

Answer 1

您需要return从以下位置获取数据map：

const viciados = this.state.viciados.map(viciado => {
  return <div key={viciado['id_viciados']}>{viciado["nome_viciado"]}</div>
});