Question

我试图让React从Django Rest Framework API获取JSON。该链接的编写方式与http://127.0.0.1:8000/band/api/1/?format=json类似，结构如下：

{
id: 1,
name: "Muse",
date_added: "2017-04-17",
image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg",
bio: "Muse are an English rock band from Teignmouth, Devon, formed in 1994. The band consists of Matt Bellamy (lead vocals, guitar, piano, keyboards), Chris Wolstenholme (bass guitar, backing vocals, keyboards) and Dominic Howard (drums, percussion)."
}

我的反应是这样写的：

class ItemLister extends React.Component {
    constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount(){
    fetch(`http://127.0.0.1:8000/band/api/1/?format=json`)
        .then(result=>result.json())
        .then(items=>this.setState({items}))
        setTimeout(() => console.log(this.state.items), 2000)
  }
  render() {
    return(
        <ul>
          {this.state.items.length ?
            this.state.items.map(item=><li key={item.id}>{item.name}</li>)
            : <li>Loading...</li>
          }
      </ul>
   )
  }
}

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

HTML容器div保持加载... ，控制台显示没有错误。我知道它与JSON有关，但不知道它是什么，任何帮助赞赏！

编辑：

根据m_callens的建议添加以下内容：

setTimeout（（）=＆gt; console.log（this.state.items），2000）

控制台返回我确实想要获取的对象，但它仍然无法在页面上呈现。

Object {id: 1, name: "Muse", date_added: "2017-04-17", image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Muse_melbourne28012010.jpg", bio: "Muse are an English rock band from Teignmouth, Dev…eyboards) and Dominic Howard (drums, percussion)."}

Answer 1

因此，在经过漫长的日志记录和调试过程之后，我想我已经找到了问题。

您的初始状态是将function sendMesaj() { $http.post('send.php', mesaj) .then(function(result){ $scope.result=result; }, handleError); function handleError(response){ return response; } }属性设置为items，因此您尝试将每个项目映射到array以呈现给您的UI，但值您是从<li>来电回来并重新分配fetch而不是this.state.items而是一个简单的对象。因此，当您尝试array对象时，它会失败，同时也会解释为什么map条件始终失败。

不要在第二次length处理您的提取时直接重新分配items，而是将其替换为此版本的.then以维护setState结构。

array

您可能还想在组件的生命周期中将... .then(newItem => this.setState((prevState, props) => ({ items: [...prevState.items, newItem] }) ) )回调从fetch挂钩推送到componentDidMount挂钩。

从React调用API

1 个答案: