[英]React Native useEffect - Warning: An effect function must not return anything besides a function, which is used for clean-up
I would like to implement a single function to check if a specific seat out 20 seats available is booked or not.我想实现一个功能来检查是否预订了 20 个可用座位之外的特定座位。 If it is, it returns red and if it's not, a green is returned.如果是,则返回红色,如果不是,则返回绿色。
I implemented the fetch function as我将获取功能实现为
const getSeatColor = (seat, vid) => {
const [color, setColor] = useState(0);
useEffect(async () => {
const response = await fetch(
`http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
);
const result = await response.json();
setColor(result.message);
}, []);
return color;
};
const vid = 4;
const seat1Color = getSeatColor(1, vid);
const seat2Color = getSeatColor(2, vid);
const seat3Color = getSeatColor(3, vid);
const seat4Color = getSeatColor(4, vid);
return (
<Screen style={{ paddingBottom: 5 }}>
{/* Seat 1 starts */}
<TouchableOpacity style={styles.seat} >
<MaterialCommunityIcons name="seat" size={40} color={seat1Color} />
<Button title="1" style={{ width: 20 }} color={seat1Color} />
</TouchableOpacity>
{/* Seat 1 ends */}
{/* Seat 2 starts */}
<TouchableOpacity style={styles.seat} >
<MaterialCommunityIcons name="seat" size={40} color={seat2Color} />
<Button title="2" style={{ width: 20 }} color={seat2Color} />
</TouchableOpacity>
{/* Seat 2 ends */}
<View style={styles.seat}></View>
<View style={styles.seat}></View>
{/* Seat 3 starts */}
<TouchableOpacity style={styles.seat} >
<MaterialCommunityIcons name="seat" size={40} color={seat3Color} />
<Button title="3" style={{ width: 20 }} color={seat3Color} />
</TouchableOpacity>
</Screen>
)
The green or red comes out ok but I get this Warning: An effect function must not return anything besides a function, which is used for clean-up.绿色或红色显示正常,但我收到此警告:效果函数不得返回除用于清理的函数之外的任何内容。
I tried this How to call an async function inside a UseEffect() in React?我试过这个How to call an async function inside a UseEffect() in React? but the same warning pops up.但同样的警告弹出。 Please help or could there be another way to achieve this?请帮忙或者有其他方法可以实现这一目标吗?
You're returning a promise using the async keyword directly as the callback argument.您将直接使用 async 关键字作为回调参数返回一个承诺。 Try re-writing your useEffect like this:尝试像这样重写你的 useEffect:
useEffect(() => { (async() => { const response = await fetch( `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}` ); const result = await response.json(); setColor(result.message); })() }, []);
or wrap that code inside of another function and call it inside of useEffect或者将该代码包装在另一个函数中并在 useEffect 中调用它
const fetchData = async () => { const response = await fetch( `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}` ); const result = await response.json(); setColor(result.message); } useEffect(() => { fetchData(); }, []);
useEffect not accept async function. useEffect 不接受异步函数。
You can try make this:你可以尝试做这个:
const getSeatColor = (seat, vid) => {
const [color, setColor] = useState(0);
useEffect(() => {
(async => {
const response = await fetch(`http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`);
const result = await response.json();
setColor(result.message);
})();
}, []);
return color;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.