Question

我将类组件转换为功能组件，但是看起来它无法正常工作，并且我找不到错误所在。当我创建一个新对象时，该对象没有name，并且当我尝试将该对象标记为complete时，它会删除所有创建的对象。我在这里创建了codesandbox。不幸的是，我对功能组件不太熟悉。任何帮助，将不胜感激。这是我的codesandbox示例：
https://codesandbox.io/s/crazy-sid-09myu?file=/src/App.js

Answer 1

您的待办事项：

const [todos, setTodos] = useState([
        { id: uuid(), name: "Task 1", complete: true },
        { id: uuid(), name: "Task 2", complete: false }
    ]);

onAddHandler：

const addTodo = () =>
setTodos([...todos, { id: uuid(), name: "New Task", complete: false }]);

onSetCompleteHandler：

const setCompleteHandler = id =>
setTodos(
  todos.map(todo => {
    if (todo.id === id) {
      return {
        ...todo,
        complete: todo.complete ? 0 : 1
      };
    }
    return todo;
  })
);

我创建了您的新待办事项。查看此链接 Todos App

Answer 2

我已经更新了您的代码，请检查URL https://codesandbox.io/s/determined-morning-n8lgx?file=/src/App.js

import React from 'react';
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import { gql,useMutation } from '@apollo/client';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import {SignUpContext} from '../../Views/SignUp/SignUp';

const SIGN_UP = gql `
    mutation($input:signUpMutationInput!){
        signUp(input:$input){
            user{
                firstName
                lastName
            }
        }
    }
`;

const useStyles = makeStyles((theme) => ({
    form: {
         // Fix IE 11 issue.
      marginTop: theme.spacing(3),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }));


export const PerformSignUp = (props) =>{
    const {signUpData,setSignUpData} = React.useContext(SignUpContext);
    const userRegistered = (data) => {
        console.log("user is finally registered")
        console.log(data);
        setSignUpData((prevState)=>{
            return{
            ...prevState,
            activeStep:3,
            }

        });   
    };
       
    

    const [ signup, { loading:signingup,error:signuperror,data:registered_user_data,called }] = useMutation(SIGN_UP,{ignoreResults : false,onCompleted : userRegistered});
    const classes = useStyles();
    if (signingup) return "loading............";
    if(signuperror) return "there is  an error signing up ";
    if (!called){
        delete signUpData.userData["acceptTerms"];
        signup({variables :{input:signUpData.userData}});
        
    }
    
    return (
        <DialogContent>
            <DialogContentText>
                Hi , Thanks for registering .    
            </DialogContentText>
            <DialogContentText>Login to your account</DialogContentText>
            <DialogActions>
                <Button
                        variant="contained"
                        color="primary"
                        className={classes.submit} 
                >
                    Login 
                </Button>
            </DialogActions>
        </DialogContent>
    );
};
    



export default PerformSignUp;

还有

  const onComp = id => {
    for (let i = 0; i < todos.length; i++) {
      if (todos[i].id === id) {
        let t = { ...todos[i] };
        t.complete = !t.complete;
        todos[i] = t;
      }
    }
    setTodos([...todos]); // Here todos reference need to be changed
  };

在使用钩子时，我们需要注意状态变量的更新。在操纵数组和对象时，使用spread运算符创建新的引用，该引用调用子组件并重新呈现当前组件。

功能组件问题React

2 个答案: