Question

我尝试在更改useState时触发useEffect，但是，它仅在组件加载时触发一次（我根本不想要），代码有什么问题？

const [value, setValue] = useState('initial');
    useEffect(()=>{
        let url = "https://hacker-news.firebaseio.com/v0/topstories.json";
        let count = 30;
        axios({
            method: 'post',
            url: '/api/grabIt',
            data: {
                url: url,
                count: count
            }
        })
            .then(function (res) {
                console.log(res.data.response)
            })
            .catch(function (error) {
                console.log(error)
            });
    },[value]);
    
    return (
        <div className={styles.displayType}>
            <ButtonContainer/>
            <Button buttonColor={!!isDarkMode}
                    onClick={ () => setValue('triggered')}
            >FETCH</Button>
        </div>
    )

Answer 1

对于您要实现的目标，不需要任何效果。我会从这样的函数中处理提取操作：

// simplified the example
const [value, setValue] = useState("initial");

const handleFetch = () => {
  setValue("triggered");
};

return (
  <div>
    <button onClick={handleFetch}>{value}</button>
  </div>
);

Answer 2

在函数useEffect中，您已设置依赖项，包括value。这意味着仅当您value更改时才打电话。设置值后，triggered。它永远不会改变，导致原始值字符串'triggered'==='triggered'。

您可以使用布尔值触发点击。示例：

const [value, setValue] = useState(false);
...
<Button buttonColor={!!isDarkMode}
        onClick={ () => setValue(!value)}

useEffect在组件加载时触发，而不是在状态更改时触发，正如我已经设置的那样

2 个答案: