Question

我需要渲染由对象值（不是数组！）制作的无序列表：

//STATE---------------------------------------------------------------------
var BooksListStore = function(){
var BooksObject = {

    a: '1st book name',
    b: '2nd book name',
    c: '3rd book name'

};

return BooksObject;
};
//STATE---------------------------------------------------------------------

我尝试使用for-in方法在我的BooksList组件中呈现此列表：

//COMPONENT BOOKSLIST--------------------------------------------------------
const BooksList = ({ DataInputParam1, BtnClickHandler1 }) => {

function Normalizer(){

    var key
    var txt

    for (key in DataInputParam1){
        txt = DataInputParam1[key];
        return <li>{txt}</li>
        }

}

return(
    <div>
        <button onClick={() => BtnClickHandler1()}>Add Books</button>

        <ul>{Normalizer()}</ul>

    </div>
);

};
//COMPONENT BOOKSLIST--------------------------------------------------------

结果我得到了这个 - 只有第一个值被呈现，控制台中没有错误：

我也是这样做的：

const BooksList = ({ DataInputParam1, BtnClickHandler1 }) => {

Object.keys(DataInputParam1).map((listItem) => {
return (
<h2>{DataInputParam1[listItem]}</h2> 
     )
})
}

在控制台中收到错误：错误：BooksList（...）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

我的整个代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {createStore, compose, combineReducers} from 'redux';
import {Provider, connect} from 'react-redux';



//STATE---------------------------------------------------------------------
var BooksListStore = function(){
var BooksObject = {

    a: '1st book name',
    b: '2nd book name',
    c: '3rd book name'

//      a: {
//          title: '1st book name',
//          description: 'first book'
//      },
//
//      b: {
//          title: '2nd book name',
//          description: 'second book'
//      },
//
//      c: {
//          title: '3rd book name',
//          description: 'third book'
//      }

    };

    return BooksObject;
};
//STATE---------------------------------------------------------------------



//REDUCER-------------------------------------------------------------------
function BooksReducer(state=BooksListStore(), action){

switch(action.type){

case 'INCREASEBOOKQTY': 
    return Object.assign( {}, state, {d: '4th book name'}, {e: '5th book 
    name'}, {f: '6th book name'} );
default: 
    return state;
 }

}

const allReducers = combineReducers({BooksReducer});
//REDUCER--------------------------------------------------------------------



//COMPONENT BOOKSLIST--------------------------------------------------------
const BooksList = ({ DataInputParam1, BtnClickHandler1 }) => {

function Normalizer(){

var key
var txt

for (key in DataInputParam1){
    txt = DataInputParam1[key];
    return <li>{txt}</li>
    }

}

return(
    <div>
        <button onClick={() => BtnClickHandler1()}>Add Books</button>
        <ul>{Normalizer()}</ul>         
    </div>
);

};
//COMPONENT BOOKSLIST--------------------------------------------------------



//ROOT COMPONENT-------------------------------------------------------------
class RootComponent extends Component{


render() {
    return (
        <div>
            <BooksList DataInputParam1={this.props.books} BtnClickHandler1=
{this.props.addbooks}/>         
        </div>
    );
}
}

//ROOT COMPONENT---------------------------------------------------------------



//CONNECTING BOOKLIST COMPONENT TO THE STORE-----------------------------------
const mapStateToProps = (state) => {
return{
    books: state.BooksReducer
};
};

const mapDispatchToProps = (dispatch) => {
return {
    addbooks: () => dispatch({type: 'INCREASEBOOKQTY'}),
};
};

const App = connect(mapStateToProps, mapDispatchToProps)(RootComponent);
//CONNECTING BOOKLIST COMPONENT TO THE STORE-----------------------------------



//STORE------------------------------------------------------------------------
const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || 
compose;
const store = createStore(allReducers, composeEnchancers());
//STORE------------------------------------------------------------------------



//RENDERING--------------------------------------------------------------------
ReactDOM.render(

<Provider store={store}>
    <App />
</Provider>, 

document.getElementById('app'));
//RENDERING--------------------------------------------------------------------

如果我还要渲染对象属性 ＆＃39; title＆＃39; 和 ＆的值，我该怎么办？＃39;说明＆＃39; 目前已被停用（评论说明一行）？

Answer 1

function Normalizer(){
    return Object.keys(DataInputParam1).map(key => <li>{DataInputParam1[key]}</li>
}

在渲染功能中

render(){
   return (
      <ul>
       { Normalizer() }
     </ul>
   );
}

Answer 2

那是因为你只返回第一个值。试试这个：

function Normalizer(){

    var key
    var txt
    var list = []

    for (key in DataInputParam1){
        txt = DataInputParam1[key];
        list.push(<li key={key}>{txt}</li>);
    }

    return list;
}

如何从React / Redux中的Object生成和呈现无序列表？

2 个答案: