Question

我正在从wordpress api获取数据。登录控制台时，我看到了数据数组。映射数据时，出现错误消息“＃myStateName.map不是函数”。

我已经使用ReactJS.org，CSS Tricks甚至是Stack溢出来寻找解决方案，但似乎没有任何作用

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>
  );
}
  }

我希望我的数据正在传递到HTML块中，但会抛出error。

Answer 1

您不会在自己的状态下初始化details。在这里添加：

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

Answer 2

在构造函数的状态声明中添加以下内容

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

该错误可能是由于this.state.details在开始时未定义而引起的。

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

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

由于结果是数组，因此不应将其设置为详细信息状态，如下所示。

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

Answer 3

似乎您没有在状态中声明details变量。

Answer 4

您可以尝试运行：

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

然后发布情况如何？

Answer 5

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

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

Answer 6

要遍历对象，请参考下面的链接-https://jsfiddle.net/oek6um0h/1/

{Object.keys(details).length && Object.keys(details).map((item,k) => {
return <any></any>
}) || <p>nothing found</p>}

map用于数组而不是对象使用map，我们需要使用Object.keys()，该方法将返回给定对象自己的可枚举属性名称的数组，其顺序与正常循环中的顺序相同

Answer 7

我终于明白了。虽然必须使用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>
)
  }

Answer 8

您需要使用默认值而不是details在constructor中定义result

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

尝试将获取的json数据映射到React应用时，“状态”未定义

8 个答案: