Javascript &引用；“国家”；尝试将获取的json数据映射到React应用程序时未定义

我正在从wordpress api获取数据。当我登录到控制台时，我看到了数据数组。在映射数据时，我得到一个错误，即“#myStateName.map不是函数”

我在ReactJS.org、CSS技巧甚至堆栈溢出上找到了解决方案，但似乎什么都不起作用

class WPHome extends Component {

  constructor(props) {
super(props);
this.state = {
  error: null,
  isLoaded: false,
  details: []
};
  }

  componentDidMount() {
fetch(API_URL)
  .then(res => res.json())
  .then(
    (result) => {
      console.log(result['0'])
      this.setState({
        isLoaded: true,
        details: [result]
      });
    },
    // Note: it's important to handle errors here
    // instead of a catch() block so that we don't swallow
    // exceptions from actual bugs in components.
    (error) => {
      this.setState({
        isLoaded: true,
        error
      });
    }

  )
}

render() {
const { error, isLoaded, details } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
  return (
    <div>
      {details.map(item => (
        <div key={item.id}>
          <p>{item.id}</p>
          <div>
            <img src={item._embedded['wp:featuredmedia']['0'].source_url} alt={item.id} />
          </div>
          <p>{item.content}</p>
          <hr />
        </div>
      ))}
    </div>
  );
}
  }

WPHome类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
详情：[]
};
}
componentDidMount（）{
获取（API_URL）
.then（res=>res.json（））
.那么(
（结果）=>{
console.log（结果['0']）
这是我的国家({
isLoaded：是的，
详情：[结果]
});
},
//注意：这里处理错误很重要
//而不是一个catch（）块，这样我们就不会吞咽
//组件中实际错误的例外情况。
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
});
}
)
}
render（）{
const{error，isLoaded，details}=this.state；
如果（错误）{
返回错误：{Error.message}；
}否则，如果（！已加载）{
返回装载。。。；
}否则{
返回(
{details.map（项=>(
{item.id}

{item.content}


))}
);
}
}

---

我希望我的数据会传递到HTML块中，但我会在构造函数中的状态声明中抛出一个。

添加以下内容

 this.state = {
  details:[],
  error: null,
  isLoaded: false,
  result: []
 }

此错误可能是由于开始时未定义this.state.details而导致的

我还注意到，在您的获取请求中，您正在执行以下操作

  this.setState({
    isLoaded: true,
    details: result['0']
  });

因为结果是一个数组，所以不应该按如下所示将其设置为详细信息状态

  this.setState({
    isLoaded: true,
    details: result
  });

---

在您的状态下，您不会初始化

详细信息
。请将其添加到此处：

this.state = {
  error: null,
  isLoaded: false,
  result: [],
  details: [] // <- missing initialization
};

this.state={
错误：null，
isLoaded:false，
结果：[]，
详细信息：[]/似乎您没有在您的状态中声明
详细信息
变量。
您需要在
构造函数中使用默认值定义
详细信息
，而不是
结果

constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        details: [] // define missing
    };
}

你能试着跑一下吗

render (
   <div>
          {
            details.map(item => (
             <div key={item.id}>
              <p>{item.status}</p>
             </div>
         }
   </div>
);

渲染(
{
details.map（项目=>(
{item.status}

}
);

请使用下面的setState语句，因为您的结果是一个对象

this.setState({ isLoaded: true, details: [result] });

要在对象上迭代，请参阅下面的链接-

{Object.keys（细节）.length&&Object.keys（细节）.map（（项，k）=>{
返回
})| |什么也找不到
}

map是为数组而不是为对象使用map我们需要使用
object.keys（）
哪个方法返回给定对象自身可枚举属性名称的数组，其顺序与我们使用普通循环得到的顺序相同
我最终找到了它。虽然我不得不使用Axios，但它起了作用

  constructor(props) {
super(props);
this.state = {
  error: null,
  isLoaded: false,
  details: []
};
}

componentDidMount(){
axios
  .get(API_URL)
  .then(response => response.data.map(detail => ({
    image: `${detail._embedded['wp:featuredmedia']['0'].source_url}`,
      content: `${detail.content.rendered}`,
      id: `${detail.id}`
    }))
  )
  .then(details => {
    this.setState({
      details,
      isLoading: false
    });
  })
  .catch(error => this.setState({ error, isLoading: false }));
}


render() {
const { isLoading, details } = this.state;

return (
  <React.Fragment>
      {!isLoading ? (
        details.map(detail => {
          const { id, content, image } = detail;
          return (
            <div key={id}>
              <p>{content}</p>
              <div>
                <img src={image} alt={id} />
              </div>
              <p>{content}</p>
              <hr />
            </div>
          );
        })
      ) : (
          <p>Loading</p>
      )
      }
  </React.Fragment>
)
  }

构造函数（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
详情：[]
};
}
componentDidMount（）{
axios
.get（API_URL）
.then（response=>response.data.map（detail=>({
图像：“${detail.\u embedded['wp:featuredmedia']['0'].source\u url}`，
内容：`${detail.content.rendered}`，
id:`${detail.id}`
}))
)
。然后（详细信息=>{
这是我的国家({
细节，
孤岛加载：false
});
})
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
const{isLoading，details}=this.state；
返回(
{！正在加载(
details.map（detail=>{
const{id，content，image}=detail；
返回(
{content}

{content}


);
})
) : (
装载

)
}
)
}
因此，请尝试注释掉
componentDidMount（）
中的代码，并检查是否会出现错误。如果不是，则问题在
result['0']
中-尝试检查您是否设置了此响应的良好键。您还可以添加
console.log（typeof details，details）
在你的渲染中显示你有什么类型的数据。注释出来后，错误消失。如果我
console.log（result['0]）
，我会看到该集中包含的所有数据。所以我不确定这是问题所在，对吗？它说
console.log（typeof details）未定义
是。我的API返回2个数组数据集，但我想深入到第一个数组数据集，即“['0']”。我还定义了详细信息状态，但仍在抛出“details.map不是函数”错误。在
details:[result]
行，您仍然需要使用扩展运算符
[…result]
，或者只是第一个元素
[结果[0]]
，否则你会得到一个嵌套的数组，你可以共享API
对象{id:2，日期：“2019-08-05T11:51:22”，日期：“2019-08-05T11:51:22”，guid:{…}，修改过的：“2019-08-05T12:51:42”，修改过的“{gmt:”2019-08-05T12:42”，slug:“主页”，状态：“发布”，键入：“页面”…}WPHome.jsx:21
您得到的响应结果是一个数组或对象请控制台。log（typeof result）您可以通过
控制台附上浏览器控制台的屏幕截图。table（result）
上面写着“object”
console.log（typeof result）
它不运行。它不识别“details”.
this.state.details
The.map函数仅在数组中可用。它看起来不是您期望的格式（它是{}，但您期望[]）。或者，您可以使用类似这样的内容：details=array.from（props.data）；或类似功能…请尝试此功能，并告诉我此功能是否有效。它没有看到来自该状态的任何数据。如果我映射
{p>{item.id}
，则在渲染时显示空的
。小提琴不会显示任何结果。
  constructor(props) {
super(props);
this.state = {
  error: null,
  isLoaded: false,
  details: []
};
}

componentDidMount(){
axios
  .get(API_URL)
  .then(response => response.data.map(detail => ({
    image: `${detail._embedded['wp:featuredmedia']['0'].source_url}`,
      content: `${detail.content.rendered}`,
      id: `${detail.id}`
    }))
  )
  .then(details => {
    this.setState({
      details,
      isLoading: false
    });
  })
  .catch(error => this.setState({ error, isLoading: false }));
}


render() {
const { isLoading, details } = this.state;

return (
  <React.Fragment>
      {!isLoading ? (
        details.map(detail => {
          const { id, content, image } = detail;
          return (
            <div key={id}>
              <p>{content}</p>
              <div>
                <img src={image} alt={id} />
              </div>
              <p>{content}</p>
              <hr />
            </div>
          );
        })
      ) : (
          <p>Loading</p>
      )
      }
  </React.Fragment>
)
  }