前端之家

  1. 首页
  2. 问答

钩不超过1次

• 问答

我正在构建一个简单的ToDoList应用。 我使用React Hook获取列表。 当我添加新的Todo或删除现有的Todo时，请求会发送并运行，但组件不会重新渲染。 我尝试了2种方法来解决创建问题 1。异步功能（删除和添加）。将getToDoList置于钩子之外，并在请求（发布/删除）后调用它 

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


const getToDoList = async () => {
    const result = await axios.get('http://localhost:1200/');
    setToDoList(result.data);
};

const addNewTodo = async () => {
    await axios.post('http://localhost:1200/create',{
        item: newToDo.current.value
    });
    getToDoList();
};

const deleteToDo = async (id) => {
    await axios.delete(`http://localhost:1200/delete?id=${id}`);
    getToDoList();
};

2。将钩子内的getToDoList放入钩子中，并赋予它2个依赖项，它们在deleteToDo / addNewToDo中发生了变化 

const [add,setadd] = useState(false);
const [remove,setRemove] = useState(false);

useEffect(() => {
    const getToDoList = async () => {
        const result = await axios.get('http://localhost:1200/');
        setToDoList(result.data);
    };
    getToDoList();
},[add,remove]);

const addNewTodo = async () => {
    await axios.post('http://localhost:1200/create',{
        item: newToDo.current.value
    });
    setadd(!add);
};

const deleteToDo = async (id) => {
    await axios.delete(`http://localhost:1200/delete?id=${id}`);
    setRemove(!remove);
};

两者都不起作用。告诉我我错了哪里

JSX 

 return (
    <div>
        <Jumbotron>
            <Container>
                <h1>Hello!</h1>
                <p>This is a simple ToDoList created by Vadik</p>
            </Container>
        </Jumbotron>
        <Container>
            <Container>
                <InputGroup>
                    <FormControl placeholder="What needs to be done" ref={newToDo}/>
                </InputGroup>
                <Button onClick={addNewTodo} variant="primary" size="sm">
                    Add new Todo
                </Button>
            </Container>
            <Container classname="cards">
                <Card>
                    <ListGroup>
                        {toDoList.todos.map((elem) => <ListGroup.Item
                            key={elem._id}>{elem.item}<CloseButton onClick={() => deleteToDo(elem._id)}/>  </ListGroup.Item>)}
                    </ListGroup>
                </Card>
            </Container>
        </Container>
    </div>
);
xrf0827 回答：钩不超过1次

尝试下面的代码。这应该起作用。在addTodo中，有两种方法可以在发布成功后更新resultList或使用getList获取最新数据并更新resultList。都显示了。

    function Example() {

      const [resultList,setResult] = useState({todos: []});

      useEffect(() => {
        const todoList = getToDoList();
        setResult(prev => todoList);
      },[]);

      const addTodo = async () => {
        await axios.post('http://localhost:1200/create',{
          item: newToDo.current.value
        });

        //Addition successful,hence update our resultList.
        return setResult(prev => {
          return {todos: [...prev.todos,{item: newToDo.current.value,id: prev.todos.length+1}]}
        });


        //Now since add api doesn't return a 
        //value call Get api again and update the todoList to render
        //const todoList = getToDoList();
        //setResult(prev => todoList);
      };

      const getToDoList = async () => {
        const result = await axios.get('http://localhost:1200/');
        return result.data;
      };          

      return (
        <div id='container'>
          {resultList.todos.map(todo => <div>{todo.item}</div>
          )}
          <button onClick={addTodo}>Add</button>
        </div>
      )


    }
,

问题是我没有对这些请求发送任何回复。enter image description here

async-awaitaxiosreact-hooksreactjsuse-effect
本文链接：https://www.f2er.com/3100190.html

大家都在问