每 N 秒重新渲染一次 API 的图像答案

【问题标题】：Rerender API's image every N second每 N 秒重新渲染一次 API 的图像
【发布时间】：2020-02-18 22:45:14
【问题描述】：

图像每 N 秒重新渲染一次（用户通过 Slider 确定值）。默认值=3
我还想在组件渲染之前为 imageUrl 设置初始状态。我怎样才能做到这一点？以及当用户没有连接到互联网时如何处理

const [value, setValue] = useState(3);
const [imgUrl, setImgUrl] = useState();  

useEffect(() => {
  const valueCopy = value;
  const timer = setTimeout(() => {
            fetch('https://dog.ceo/api/breeds/image/random')
                .then(responce => responce.json())
                .then(data => {
                    setImgUrl(data.message);
                })
                .catch(err => console.warn(err));
        }, valueCopy * 1000);

   return () => clearTimeout(timer);
});  

return (
   <Image style={styles.img} source={{ uri: `${imgUrl}` }} />
   <Text style={styles.valueText}>{value}</Text>
   <Slider value={value} onValueChange={(sliderValue) => setValue(sliderValue)} />

)

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

export default function App() {
  const [value, setValue] = useState(3);
  const [imgUrl, setImgUrl] = useState();

  const getImage = () =>
    fetch("https://dog.ceo/api/breeds/image/random")
      .then(response => response.json())
      .then(data => {
        setImgUrl(data.message);
      })
      .catch(console.warn);

  useEffect(() => {
    getImage();
  }, []);

  useEffect(() => {
    const timer = setInterval(getImage, value * 1000);
    return () => clearInterval(timer);
  }, [value]);

  return (
    <div>
      {imgUrl ? <img src={imgUrl} alt="dog" /> : <div>LOADING...</div>}

      <div>{value}</div>
      <input
        type="range"
        min={1}
        max={10}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>
  );
}

【讨论】：