Question

我试图学习React，而且我是Javascript的初学者。现在我正在开发一个从Flickr的API中获取数据的应用程序。问题是，当我尝试在Main.js组件中的props上使用map方法时，我得到一个错误说＆＃34; Uncaught TypeError：this.props.photos.map不是函数＆＃34;。在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首先未定义？

Screen shot from console.log(this.props.img)

Answer 1

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

正在发生的事情是，您承诺中的地图功能会为每张返回的照片重置组件的状态。因此，您的状态将始终是返回照片列表中的最后一个对象。

以下是我所指的

的更简化示例

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

Answer 2

如果您尝试提供除 .map() 所期望的数组以外的其他内容，即使您正确声明了变量类型，也可能会发生此错误。基于钩子的示例：

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

React .map不是一个函数

2 个答案: