使用 axios.get 渲染 json 数据

Question

我是 react.js 的新手，我试图在表中以 JSON 格式获取服务器端数据。所以我所做的是：

export default class TableUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    table: [],
  }
}
componentDidMount(){
  axios.get('http://www.reddit.com/r/reactjs.json')
    .then((response)=>{
      const table = response.data.map(obj => obj.data);
        this.setState({ table });
      })
    .catch((err)=>{

    })
}

我把它渲染成<div>这样：

render(){
    <div><p>{this.state.table.kind}</p></div>
}

为什么我没有得到 的价值kind？请推荐！！

Answer 1

obj.data（有data一个属性）不是children，我认为在这种情况下最好更改默认状态，并为( ) 创建一个字段，为( ) 创建一个字段，如下所示ArrayObjectArraykindStringdataArray

class TableUser extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      kind: '',
      data: []
    };
  }
  
  componentDidMount(){
    axios
      .get('https://www.reddit.com/r/reactjs.json')
      .then(({ data })=> {
      	this.setState({ 
          kind: data.kind, 
          data: data.data.children
        });
      })
      .catch((err)=> {})
  }
      
  render() {
    const child = this.state.data.map((el, index) => {
      return <div key={index}>
        <p>Title - { el.data.title }</p>
        <p>Author - { el.data.author }</p>
      </div>
    });

    return <div>
      <p>{ this.state.kind }</p>
      <div>{ child }</div>
    </div>;
  }
}

ReactDOM.render(
  <TableUser />,
  document.getElementById('container')
);

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<div id="container"></div>