Question

我基本上是从外部api获取url详细信息，并在react中使用this.setState更新我的状态。但是现在状态改变时，我已经在javascript数组上使用了map，但是它似乎没有更新预期的url。而是具有初始数据。

下面是我在render（）函数中使用的代码段。

console.log("output 1", this.state.blogData);
const blogDetails = this.state.blogData.map(data => {
    console.log("output 2", data);
    return (
        <Col key={data.id} xs={12} sm={4} className="person-wrapper">
            <Blogs
                key={data.id}
                content={data.content}
                title={data.title}
                imagelinksm={data.url1}
                imagelinklr={data.url2}
            />
        </Col>
    );
});

在控制台中，输出1与输出2相比具有不同的url。虽然映射是数组，但不确定映射是否引起了问题。

我能够注意到，上图中显示扩展后的javascript对象的第一行与以下内容相比具有不同的url1和url2。因此，因此，每当我执行data.url1时，我都会得到“ N”而不是实际的URL。任何线索为什么会发生这种情况？我有点卡在这里。

Answer 1

render(){
  const { blogData } = this.state;
  if(!blogData) return <p>Nothing...</p>

  return <>{ blogData.map(data => {
                                console.log('output 2', data)
                                return (
                                    <Col key={data.id} xs={12} sm={4} className="person-wrapper" >
                                        <Blogs key={data.id} content={data.content} title={data.title} imagelinksm = {data.url1} imagelinklr = {data.url2}/>
                                    </Col>
                                )
                            })
  }</>
}

读取混乱的代码并不有趣。

Javascript对象数组未在React JS中使用map时显示预期值

1 个答案: