如何呈现通过表单输入添加的数据？

Question

我正在呈现来自 API 的信息，但我还需要呈现使用 webform 添加的新信息。我制作此表单是为了添加简单信息作为 API 中的对象。如何在此处呈现从此表单添加的数据？

function FormPage({ setData }) {
    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [id, setId] = useState(0);

    const handleSubmit = (e) => {
        e.preventDefault();
        const book= { name, description, id}


        fetch('link-from-api', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(book)
        }).then(() => {
            console.log('new book added');            
        })
    }

    return (
        <>     
                    <form noValidate autoComplete="off" onSubmit={handleSubmit}>
                            <TextField
                                required
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                label="Name" />
                            <TextField
                                required
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                                label="Description" />
                            <button type="submit" onClick={handleId}> set</button> 
                    </form>
        </>
    );
}

export default FormPage;

当我添加新书时，我需要在这个文档中看到它：

function BooksPage() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        fetch('link here')
            .then(res => {
                return res.json();
            })
            .then((data) => {
                setBooks(data)
            })
    }, [])


    return (
        <Container>
            <Header />
            {books && 
            <ListBooks props={books} />}
        </Container>
    )
}

谁能帮帮我？提前致谢。

Answer 1

您可以将提取移动到一个单独的函数并在 POST 完成后再次调用

function BooksPage() {
    const [books, setBooks] = useState([]);

    function fetchBooks() {
        fetch('link here')
            .then(res => {
                return res.json();
            })
            .then((data) => {
                setBooks(data)
            })
    }

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


    return (
        <Container>
            <Header />
            {books && 
            <ListBooks props={books} />}
            <FormPage fetchBooks={fetchBooks} />
        </Container>
    )
}

并且在您的表单中：

const handleSubmit = (e) => {
        e.preventDefault();
        const book= { name, description, id}


        fetch('link-from-api', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(book)
        }).then(() => {
            console.log('new book added');
            // fetch again
            fetchBooks();            
        })
    }

Answer 2

这里需要用到lifting the state up这个概念。

在FormPage和BooksPage

这两个组件的公共父组件中定义你的状态变量books

将此方法传递给组件 FormPage。

const addBook = (book) => {
  setBooks(b => [...b, book])
}

在

调用此方法

const handleSubmit = (e) => {
    e.preventDefault();
    const book= { name, description, id}


    fetch('link-from-api', {
        method: 'POST',
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(book)
    }).then(() => {
        console.log('new book added');
        addBook(book)          
    })
}

并将 books 和 setBooks 传递到 BooksPage 页面。

如何呈现通过表单输入添加的数据？

How to render data added with form inputs?

javascript

reactjs

react-hooks

use-effect