反应中的嵌套地图返回一个空页面答案

【问题标题】：Nested maps in react return an empty page反应中的嵌套地图返回一个空页面
【发布时间】：2020-09-22 14:15:18
【问题描述】：

我正在尝试迭代一系列日期，然后渲染匹配的对象。

没有存储日期

日期需要存储在状态datesarray[] 中（尽管只有键），事件类似地存储在events[] 的arrant 中。两者都填充如下：

componentDidMount() {
    fetch('http://127.0.0.1:5002/events')
        .then(res => res.json())
        .then((data) => {
            {/* Orders descending */}
            this.setState({events: data.sort(
                (event1,event2) => -event1.date.localeCompare(event2.date))})
    
                {/* Places dates into an array */}
                let eventdate = "";
                for (var r in data) {
                    eventdate = r.date;
                    console.log("help");
    
                    if (!this.state.datesarray.includes(eventdate)) {
                        this.state.datesarray.push(eventdate);
                    }
                }
          }
    ).catch(console.log)
}

我修改了 for 循环以使用 Object.keys，但是这同样提供了一个键，而不是日期值：

{/* Places dates into an array */}
{Object.keys(data).map(date => this.setState({ datesarray: [...this.state.datesarray, date] }))}

以下出品者

// convert object to key's array
Object.keys(data).forEach(val => console.log(val));
Object.values(data).forEach(val => console.log(val));

部分成功#1

在不映射下一个日期的情况下运行应用程序时，我确实得到了结果。

render() {
    return(
        <div className="container">
        {this.state.events
            .filter(event => event.date
            .includes({date}))
            .map(filteredEvent =>(
                <Events event={filteredEvent} />
                
            )
         )
     }
 )}
 </div>      
}

但是，当尝试使用外部地图获取存储在datesarray[] 中的日期时，不会呈现任何内容

render() {
    return(
        <div className="container">
        {this.state.datesarray.map(date =>
            {this.state.events
            .filter(event => event.date
            .includes({date}))
            .map(filteredEvent =>(
                <Events event={filteredEvent} />
            ))}
        )}
        </div>
    );
}

部分成功 #2

我现在可以将日期存储在 mt componentDidMount 中：

Object.values(data).forEach(val =>{
    !datesarray.includes(val.date) && datesarray.push(val.date)
});

我可以单独打印日期和记录。请记住，我正在尝试使用嵌套地图进行分组。我只是不知道如何将它们打印在一起。

我正在尝试将第一个映射中的 {date} 值转换为 .includes 值。

render() {
    return(
        <div className="container">
            {this.state.datesarray.map(date => <h1>{date}</h1>)}
            {this.state.events
             .filter(event => event.date
             .includes("2020-09-30"))
             .map(filteredEvent =>(
                 <Events event={filteredEvent} />
             )
      )}
      </div>
      );
    
}

【问题讨论】：

我刚刚意识到问题在于没有将日期填充到数组中。让我们看看我能不能弄明白。
我已经弄清楚如何将项目添加到数组中。但是，我添加的键不是我想要的日期值。问题已更新。

标签： reactjs jsx

【解决方案1】：

当您将每个 eventdate 推送到 this.state.datesarray 时，您正在改变状态。 React 渲染周期基于不可变状态的快照，只有在调用 setState 时才会触发重新渲染。通常最好将数据处理和状态设置完全分离到离散的操作中以避免这样的突变。

componentDidMount() {
  fetch('http://127.0.0.1:5002/events')
  .then(res => res.json())
  .then(data => {

    const events = [...data].sort((event1, event2) => (
      -event1.date.localeCompare(event2.date)
    ));
    let datesarray = [...this.state.datesarray];
    
    for (let r in data) {
      !datesarray.includes(r.date) && datesarray.push(r.date);
    };
    
    this.setState({
      events,
      datesarray
    });

  }).catch(console.log);
};

【讨论】：

我只是想明白这一点（谢谢）但是，我收到一个错误TypeError: event1.date.localCompare is not a function. (In 'event1.date.localCompare(event2.date)', 'event1.date.localCompare' is undefined)
错别字，应该是localeCompare，我总是弄错那个。
好吧，有点效果。我现在正在渲染一行但没有数据。我认为这可能是因为data 是一个对象数组。每个都包含一个值date。我应该像上面那样使用r.date吗？或者我应该以某种方式引用该对象？
不能提供更多建议，因为我不确定渲染应该是什么样子。我想知道在.map(filteredEvent => ...)之前是否应该只是.includes(date)。
不，在您的示例中执行 Object.keys 和 Object.values 会提供我刚刚添加的屏幕截图的输出。我正在将对象键写入datesarray，而不是对象中的单个值。

【解决方案2】：

除了将日期正确放入数组的问题之外：

  const events = [...data].sort((event1, event2) => (-event1.date.localeCompare(event2.date)));
  let datesarray = [...this.state.datesarray];

  // convert object to key's array
  //  Object.keys(data).forEach(val => console.log(val));
  Object.values(data).forEach(val =>{
    !datesarray.includes(val.date) && datesarray.push(val.date)

  });

我还设法嵌套了这两个映射。挫折之一是 .includes({date}) 应该是 .includes(date)

render() {


return(


  <div className="container">


  {this.state.datesarray.map(date => {


    return(

      <div>
      <h6>{date}</h6>

            {this.state.events
              .filter(event => event.date
                .includes(date))
                .map(filteredEvent =>(
                  <Events event={filteredEvent} />

                )
              )
            }
      </div>
    )

  })}



  </div>

);

}

【讨论】：