Question

只是想了解 useEffect 钩子。我只是想要一个按钮，当点击时有一个函数来识别 ID，然后让 useEffect 呈现一个条件语句。

我想我让 React 监听了 setJoin 或 setCreate 的变化，函数 handleClick 成功地改变了这些值，但是这里没有重新渲染。

一些我在这里还没有理解的基本知识？

import CreateSign from "./CreateSign";
import JoinSign from "./JoinSign";
import {useState, useEffect} from 'react';

const Starter = () => {
    const [isJoin, setIsJoin] = useState(null);  
    const [isCreate, setIsCreate] = useState(null);
    var [setJoin] = useState(null);
    var [setCreate] = useState(null);
    
    const handleClick = (e) => {
        if(e.target.id === 'join') {
            setJoin = true;
            setCreate = null;
        }
        if(e.target.id === 'create') {
            setCreate = true;
            setJoin = null;
        }
        console.log(setJoin, setCreate);
    }

    useEffect(() => {
        if(setJoin === true){
            setIsJoin(true);
            setJoin = false;
        }
        if(setCreate=== true){
            setIsCreate(true);
            setCreate = false;
        }
    },[setJoin, setCreate]);

     return (
        <div>
            {  console.log('IsJoin '+isJoin, 'isCreate '+isCreate) }
            <div className="form flex center">
                <h2 className="formHeading f-white f3m m0-5m">Let's begin</h2>
                <div className="block flex center p1m">
                    
                    <button id="join" className="btn join" onClick={handleClick}>
                        <span className="fp splash splash-learner white-ol">Blending</span>
                        Learner</button>
                    <button id="create" className="btn create" onClick={handleClick}>
                        <span className="fp splash splash-teacher white-ol">Designing</span>
                        Teacher</button>
                </div>
            </div>
            { isJoin && <JoinSign /> }
            { isCreate && <CreateSign /> }
        </div>
    );

}

export default Starter;

Answer 1

您当前的实现存在一些问题，我认为您实际上根本不需要使用 useEffect 钩子。
一个更简单的方法是：

import CreateSign from "./CreateSign";
import JoinSign from "./JoinSign";
import {useState} from 'react';

const JOIN = 'JOIN';
const CREATE = 'CREATE'

const Starter = () => {
    const [mode, setMode] = useState(null);  
  
    const isJoin = mode === JOIN
    const isCreate = mode === CREATE

     return (
        <div>         
            <div className="form flex center">
                <h2 className="formHeading f-white f3m m0-5m">Let's begin</h2>
                <div className="block flex center p1m">
                    
                    <button id="join" className="btn join" onClick={() => setMode(JOIN)}>
                        <span className="fp splash splash-learner white-ol">Blending</span>
                        Learner</button>
                    <button id="create" className="btn create" onClick={() => setMode(CREATE)}>
                        <span className="fp splash splash-teacher white-ol">Designing</span>
                        Teacher</button>
                </div>
            </div>
            { isJoin && <JoinSign /> }
            { isCreate && <CreateSign /> }
        </div>
    );

}

export default Starter;

您还使用 var [setJoin] = useState(null); 然后使用 setJoin = false; 但这不起作用，useState 返回一个包含两个元素的数组，其中包含一个值和一个 setter 函数，修改状态的唯一方法是通过使用 setter 函数，当您执行 setJoin = false; 时，您实际上是在不更改状态的情况下覆盖变量

React 中的 useEffect 无法进行电子渲染

1 个答案: