"無效的鈎子調用 - React Native"

Question

我是新來的反應本機和實施平面列表。 在平面列表的渲染項中，我正在渲染一個功能組件，如果用戶選擇或取消選擇它，我想使用狀態來更改圖像。

我面臨的問題是拋出無效的鈎子調用。 我嘗試了所有教程，但它顯示了描述狀態的完全相同的方式。

const NewsItem = (props, item, onFavouriteSelect, index) => {

const[isFavourite,setFavourite] = useState(false);

return<Text>Random text for stackoverflow</Text>

}

Answer 1

而不是調用const[isFavourite,setFavourite] = useState(false);<\/code> 在NewsItem<\/code>中，在函數組件的頂層調用 useState 。

const NewsItem = (props, item, onFavouriteSelect, index) => {

    const[isFavourite,setFavourite] = useState(false); //remove this line and place in top-level of your function

  return<Text>Random text for stackoverflow</Text>

}

Answer 2

使用這種方式

import NewsItem from './NewsItem';

renderItem={({item, index}) =>
          <NewsItem 
            props={this.props} 
            item={item}
            onFavouriteSelect={this.onFavouriteSelect}
            index={index}
            isFavourite={this.state.isFavourite},
          )
        }


const NewsItem = ({props, item, onFavouriteSelect, index}) => {

  const[isFavourite,setFavourite] = useState(false);

  return<Text>Random text for stackoverflow</Text>

}
export default NewsItem;