React：遍历对象、查找数组并显示数组项答案

【问题标题】：React: Iterate over object, find array, and display array itemsReact：遍历对象、查找数组并显示数组项
【发布时间】：2017-10-17 14:33:58
【问题描述】：

我正在尝试遍历 axios 调用“/Home/NewsNotes”返回的对象。

来自 Axios 的回应

我可以在屏幕上显示属性名称，但在访问“NewsNotes”数组时遇到问题。

这是我的组件代码。

class ReleaseDetailsComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        releaseNotes: {}
    };
}

componentDidMount() {
    var _this = this;
    const urlParams = new URLSearchParams(window.location.search);
    const currCatId = urlParams.get('categoryId');
    axios.get('/Home/NewsNotes?categoryId=' + currCatId)
        .then(response => _this.setState(
            { releaseNotes: response.data }
        ))
        .catch(function (error) {
            console.log(error);
        });
    console.log(currCatId);
}

render() {
    return (
        <section>
            <div className="row">
                <div className="col-sm-8 col-sm-offset-2 col-md-10 col-md-offset-1">
                    <h2 className="page-title tutorials"><img className="title-icon" src="/Content/images/icons/icon-release-notes.png" /> News & Release Notes</h2>
                    <h3>{this.state.releaseNotes.Title}</h3>
                    {Object.keys(this.state.releaseNotes).map(function (item, key) {
                        return (
                            <p>{item}</p>
                        );
                    })}
                </div>
            </div>
        </section>
    );
  }
}

ReactDOM.render(
<ReleaseDetailsComponent />,
document.getElementById('tutorialsWrapper')
);

【问题讨论】：

使用this.state.releaseNotes.NewsNotes访问它

标签： arrays reactjs asp.net-mvc-4

【解决方案1】：

我假设您使用 axios 从 URL 中检索到的对象将如下所示：

var releaseNotes = {
    NewsNotes: [
        "Buy some milk": "data 1",
        "Clean kitchen": "data 2",
        "Watch Netflix": "data 3"
    ],
    NewsNotesCategoryId: 3,
    SortOrder: null,
    Title: "1.0.1",
    TypeId: 2
};

接下来，您可以将“this”注入到 map 方法中，检查任何子数组，然后将每个 JSX 块推入 temp 数组以便稍后返回：

{Object.keys(this.state.releaseNotes).map((key, idx) => {
    var temp = [];
    temp.push(<p>{key}</p>);

    if (Array.isArray(this.state.releaseNotes[key])) {
        this.state.releaseNotes[key].map(ckey => {
            temp.push(<p>{ckey}</p>);
        });
    }

    return temp;
}, this)}

【讨论】：

所以这只是你想得到什么的问题。比如我想以 Body 为列表，那么在 if 语句中：this.state.releaseNotes[key].map((key, idx) => { temp.push(<p>{key.Body}</p>); });

【解决方案2】：

您不能使用键来呈现元素数组。而是映射数组并像这样打印它们。

renderReleaseNotes() {
  return _.map(this.state.releaseNotes, releaseNote => {
    return (
      <p>releaseNote.title</p>

    );
  });
}

希望这会有所帮助。快乐编码！

【讨论】：