Question

我正在尝试使用fetch进行ajax调用。数据库是通过mongo运行的，当使用来自.json文件的虚拟数据时，地图在甲板上正常工作：[]，它会产生错误。

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            decks: []
        };
    }

    componentDidMount() {
        fetch("/api/getAllDecks")
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        decks: result.decks
                    });
                    console.log("hiiii");
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                    console.log('hryyyy');
                })
    }

    render() {
        const decks = this.state.decks;
        return (
            <div className='container'>
                {this.state.decks.map(decks => (
                    <MiniCard
                        word={decks.deckName}
                    />
                ))};
            </div>
        );
    };
}

Answer 1

使用Fetch API，您需要将响应转换为您想要的数据类型才能使用它。要在此处执行此操作，请在获取调用返回的响应对象上调用.json()。

fetch('/api/getAllDecks')
  .then(response => response.json())
  .then(data => {
    this.setState({ isLoaded: true, decks: data.decks })
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

此外，通过对其进行data.decks来仔细检查以确保console.log是正确的，也不会有任何损失。

Answer 2

短圈this.state.decks

 {
      this.state.decks && 
        this.state.decks.map { decks => (<MiniCard word={decks.deckName} />))
 };

React.js无法读取未定义的属性“map”

2 个答案: