我試圖將一個函式從一個組件傳遞給它的子組件，在這種情況下，posts.js 映射到每個帖子并添加一個名為 changeState 的道具。但它似乎不起作用。
Posts.js 的代碼
import Post from "./post"
export default function posts() {
const posts = [<arrayOfPosts>];
const [favoritesChanged, setFavoritesChanged] = useState(1);
const changeState = () => {
setFavoritesChanged(Math.random());
}
useEffect(() => {
console.log("favorites changed");
}, [favoritesChanged])
return (
{posts.map((post) => {
<Post changeState={changeState} key={post.id} post={post} />
}
)
}
然后在 post.js 檔案中我們有：
const Post = ({ changeState }) => {
console.log("change state: ", changeState);
return (
<View>
<TouchableOpacity onPress={changeState}>
<Text>Click here to test.</Text>
</TouchableOpacity>
<Text>{post.title}</Text>
</View>
)
}
export default Post
但是按下操作不會觸發 changeState 函式，并且它被 console.logged 顯示為未定義。有誰知道為什么這行不通？
uj5u.com熱心網友回復：
您缺少Post在.map回呼中回傳組件 JSX ：
return (
{posts.map((post) => {
return <Post changeState={changeState} key={post.id} post={post} />
})}
);
或使用隱式箭頭函式回傳：
return (
{posts.map((post) => (
<Post changeState={changeState} key={post.id} post={post} />
))}
);
確保你正在解構你需要的所有傳遞的道具：
const Post = ({ changeState, post }) => {
return (
<View>
<TouchableOpacity onPress={changeState}>
<Text>Click here to test.</Text>
</TouchableOpacity>
<Text>{post.title}</Text>
</View>
)
};
uj5u.com熱心網友回復：
嘗試使用它作為posts 組件中的回傳值。
回傳 （
<>
{
posts.map(val=>
< Post changeState = { changeState } key={val} />
)
}
</>
)
將此作為參考：沙箱參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/392313.html