React .map不是一个函数。

Question

React .map不是一个函数。

7

我是一个初学者，正在尝试学习 React 和 JavaScript。现在我正在开发一个从 Flickr API 获取数据的应用程序。问题是，在 Main.js 组件中尝试对 props 使用 map 方法时，我会收到以下错误："Uncaught TypeError: this.props.photos.map is not a function"。在 Stackoverflow 上搜索后，我认为问题是 this.props 是 JavaScript 对象而不是数组。问题是我不知道如何将它转换为数组。有人可以解释一下我做错了什么吗？

我的代码：

class App extends Component {

  constructor() {
  super();
  this.state = {

  }
}

componentDidMount() {

let apiKey = 'xxxxxxxxxxxxxxxxxx';
let searchKeyword = 'nature';
let url = `https://api.flickr.com/services/ 
           rest/?api_key=${apiKey}&method=flickr.photos.
           search&format=json&nojsoncallback=1&&per_page=50
           &page=1&text=${searchKeyword}`;

fetch(url)
  .then(response => response.json())
  .then(data => data.photos.photo.map((x) => {

    this.setState({
      farm: x.farm,
      id: x.id,
      secret: x.secret,
      server: x.server})
   // console.log(this.state)
  }))
 }

    render() {
      return (
        <div className="App">
          <Header />
          <Main img={this.state.photos} />
          <Navigation />
        </div>
      );
    }
  }

  export default class Main extends Component {

  render() {

    return(
      <main className="main">
        {console.log(this.props.photos)}
      </main>
    )
  }
 }

编辑:

为什么this.props.img一开始是未定义的？

控制台输出console.log(this.props.img)的截图

- Tose

什么是 photo？map 是 Array 的一个方法。 - Davin Tryon

我收到一个错误，提示“未捕获的类型错误：this.props.photos.map不是一个函数”。在你引用的代码中没有出现 this.props.photos.map 的字样。但是，data.photos.photo.map 出现了，请问你是指它吗？ - T.J. Crowder

1

分开来看：你正在调用map，在map回调函数内部，你正在调用setState并且没有返回任何值，所以你将每个条目映射为undefined；而且你根本没有使用map的返回值（你返回了它，但没有任何东西使用该promise，所以它未被使用）。你几乎肯定不想这样重复调用setState。 - T.J. Crowder

URL是否真的有换行符？那样做可能无法正常工作。 - Patrick Roberts

3个回答

1

如果您尝试提供除了.map()期望的数组之外的其他内容，即使您正确声明变量类型，也可能会出现此错误。以下是一个基于hook的示例：

const [myTwinkies, setMyTwinkies] = useState<Twinkies[]>([]);

useEffect(() => {
  // add a twinky if none are left in 7eleven
  // setMyTwinkies(twinkiesAt711 ?? {}); // ---> CAUSES ".map is not a function"
  setMyTwinkies(twinkiesAt711 ?? [{}]); 
}, [twinkiesAt711, setMyTwinkies]);

return (<ul>
  {myTwinkies.map((twinky, i)=> (
    <li key={i}>Twinky {i}: {twinky?.expiryDate}</li>
  ))}
</ul>)

- CPHPython

0

在进行映射之前，只需检查数组的长度。如果长度大于0，则进行映射，否则忽略它。

data.photos.photo.map.length>0 && data.photos.photo.map(........)

- Mujahidul Islam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Wyman · Accepted Answer

fetch(url)
  .then(response => response.json())
  .then(data => data.photos.photo.map((x) => {

    this.setState({
      farm: x.farm,
      id: x.id,
      secret: x.secret,
      server: x.server})
  }))

正在发生的是您在Promise中的映射函数对每个返回的照片重新设置了组件的状态。因此，您的状态始终是返回的照片列表中的最后一个对象。

这是我所提到的更简化的示例：

const testArray = [1,2,3,4];

let currentState;

testArray.map((value) => currentState = value)

console.log(currentState);

你想要做的是这样的

const testArray = [1,2,3,4];

let currentState;

//Notice we are using the return value of the map function itself.
currentState = testArray.map((value) => value)

console.log(currentState);

对于您想要实现的目标，您希望您的状态是map函数的结果（因为它返回映射结果的数组）。可以像这样实现：

fetch(url)
  .then(response => response.json())
  .then(data => 
    this.setState({
      photos:
        data.photos.photo.map((x) => ({
          farm: x.farm,
          id: x.id,
          secret: x.secret,
          server: x.server
        }))
     })
   )