props.items.map不是使用React的函數

Question

我正在使用React作為初學者，我查找了我遇到的錯誤，大多數人說您不能將map與對象一起使用，它必須是數組。 但是當放到console.log中時，我正在獲取有關props.items的以下數據：

[{
  ItemKey: 82521,
  ISBN: "158344422X",
  Title: "Butterflies And Moths",
  Publisher: "Benchmark Education",
  Illustrator: " "
}, {
  ItemKey: 85938,
  ISBN: "9780452274426",
  Title: "In the Time of the Butterflies",
  Publisher: "Penguin Plume",
  Illustrator: " "
}]

因此它正在返回一個數組。 但是我仍然得到映射不是函數錯誤。 這是我的代碼：

function ItemGrid (props){
    return (
        <ul className='items-list'>
            {props.items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

有人看到我編寫的代碼有異常或對象返回了嗎？

編輯：這是我如何獲取數據：

module.exports = {
    fetchItems: function(){
        var encodedURI = window.encodeURI('http://localhost:8081/items?Title=butterflies', { crossdomain: true });
        return axios.get(encodedURI).then(function(response){
            return response.data;
        });
    }
}

我通過以下方式將數據傳遞給ItemGrid：

componentDidMount(){
    api.fetchItems().then(function(items){
        this.setState(function(){
            return {
                items: items
            }
        })
    }.bind(this));
}

render() {
    return (<div>
        <ItemGrid items={this.state.items} />
    </div>);
}

一旦數據存在，我也很難顯示li項目：

<ul className='items-list'>

            {items && items.map(function (item, index) {
                console.log(item);
                <li key={index} className='items-list-item'>
                    item.Title
                </li>
            })}
        </ul>

Answer 1

可以並且將多次調用render函數，通常在第一次使用時就沒有任何數據。

因此，您需要先檢查數據是否存在，然后再嘗試使用map()函數對其進行迭代。

如果不存在props.items則可以返回簡單的內容，例如null或什至是“ Loading”，並且下次（當數據存在時）它將按預期工作。

因此，您的新代碼可能是這樣（僅在定義了props.items的情況下才呈現）：

function ItemGrid (props){
    return (
        <ul className='items-list'>
            {props.items && props.items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

Answer 2

正確的解決方案取決於如何檢索數據。 如果它是腳本中的簡單JS數組，那么在安裝組件時，數據應該可用。

 var data = [{ ItemKey: 82521, ISBN: "158344422X", Title: "Butterflies And Moths", Publisher: "Benchmark Education", Illustrator: " " }, { ItemKey: 85938, ISBN: "9780452274426", Title: "In the Time of the Butterflies", Publisher: "Penguin Plume", Illustrator: " " }]; function ItemGrid(props) { var items = props.items; return ( <ul className='items-list'> { items.map(function(item, index) { return (<li key={item.ItemKey} className="items-list-item">{item.Title}</li>) }) } </ul> ) } ReactDOM.render(<ItemGrid items={data} />, document.getElementById("app")); 

 <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="app"></div> 

另一方面，如果要從異步請求中檢索數據，那么在裝入組件時它可能不可用，並且需要處理props.items為undefined / empty / null的情況。 在下面的示例中，我們將<ItemsGrid/>組件包裝在<Parent/>組件中，該組件將這些items作為道具傳遞給<ItemsGrid/> 。 最初，這些items為null ，並在3秒鍾后變為數組。 這模擬了一個異步數據源。

當items為null我們返回一個顯示Loading...的列表，當items更改為有效值時，我們將顯示這些item。

 class Parent extends React.Component { constructor(props) { super(props); this.state = { data: null }; window.setTimeout(function(){ this.setState({ data: [{ ItemKey: 82521, ISBN: "158344422X", Title: "Butterflies And Moths", Publisher: "Benchmark Education", Illustrator: " " }, { ItemKey: 85938, ISBN: "9780452274426", Title: "In the Time of the Butterflies", Publisher: "Penguin Plume", Illustrator: " " }] }) }.bind(this), 3000); } render() { return ( <ItemGrid items={this.state.data} /> ) } } function ItemGrid(props) { var items = props.items; if (!items) { return ( <ul> <li>Loading...</li> </ul> ); } return ( <ul className='items-list'> { items && items.map(function(item, index) { return (<li key={item.ItemKey} className="items-list-item">{item.Title}</li>) }) } </ul> ) } ReactDOM.render(<Parent />, document.getElementById("app")); 

 <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="app"></div> 

Answer 3

如果您使用的是redux，這是一個非常簡單的修復程序，但是如果您不這樣做：

發生的情況是，在安裝組件時，它會立即搜索props.items ，但它為null 。 您有一個異步事件，該事件最終會獲取數據，但是這樣做的速度不夠快。

解決此問題的最簡單方法是在組件嘗試呈現內容之前，通過使用條件語句來控制.map接受的內容。

function ItemGrid (props){
    const items = props.items ? props.items : []
    return (
        <ul className='items-list'>
            {items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

檢查props.items是否為null 。 如果是，請渲染一個空數組，以免引發錯誤。 如果確實存在，它將使用props.items 。

請記住，這僅在收到數據數組后嘗試重新呈現時才有效。 我個人會使用promise和state來控制渲染，因為在任何情況下都可以使用。 這是一個涉及更多的解決方案，但是作為React開發人員，這應該是您應該知道的。 保持更新。