मैं प्रतिक्रिया में एक आवेदन विकसित कर रहा हूँ।Js

और मेरे पास एक टेबल है जिसे मुझे पृष्ठ को रीफ्रेश किए बिना अपडेट करने की आवश्यकता है।

कोड:

const App = () => {
    const [item, setItem] = useState([])
    const [category, setCategory] = useState([])

    const categories = category.map(elem => ({
        value: elem.id,
        label: elem.cat,
    }));

    const [category_select, setCategorySelect] = React.useState(null);

    function handleChangeCategory(value) {
        setCategorySelect(value);
    }

    useEffect(() => {
        getItems()
    }, [])

    useEffect(() => {
        getCategories()
    }, [])

    const getItems = async () => {
        const response = await axios.get(REQUEST_1)
        setItem(response.data)
    }

    const getCategories = async () => {
        const response = await axios.get(REQUEST_2)
        setCategory(response.data)
    }

    const addItems = () => {
        axios.post(`${REQUEST_1}`, {cat: category_select.value});
    };

    const body = () => {
        return item && item.map((elem,j) => {
            return (
                <tr key={elem.id}>
                    <td><span>{elem.cat}</span></td>
                </tr>
            )
        })
    }

    return (
        <>
            <div>
                <div>
                    <div>
                        <div>
                            <NoSsr>
                                <Select
                                    classes={classes}
                                    styles={selectStyles}
                                    inputId="category"
                                    TextFieldProps={{
                                        label: 'Category',
                                        InputLabelProps: {
                                        htmlFor: 'category',
                                        shrink: true,
                                        },
                                        placeholder: 'Search',
                                    }}
                                    options={categories}
                                    components={components}
                                    value={category}
                                    onChange={handleChangeCategory}
                                />
                            </NoSsr>
                            <span>Select</span>
                        </div>
                        <div>
                            <label>&nbsp;</label>
                            <span onClick={addItems}></span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>
                                                <span>Category</span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {body()}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default App;

विचार यह है कि एक श्रेणी का चयन किया जाता है और आइटम जोड़ा जाता है।

मुझे जो चाहिए वह <span onClick={addItems}></span> पर क्लिक करने के बाद मैप (return item && item.map((elem,j) => {...})) को अपडेट करने में सक्षम होना है जो आइटम को जोड़ने वाले addItems फ़ंक्शन को कॉल करता है। सीधे शब्दों में कहें तो मुझे इसे अद्यतन किए बिना तालिका में जोड़ने की आवश्यकता है।

मैं यह कैसे कर सकता हूं, सुझाव?

0
bonnegnu 27 पद 2020, 15:05

1 उत्तर

सबसे बढ़िया उत्तर

आपको निर्भरता को useEffect में जोड़ने की आवश्यकता है ताकि जब भी उपयोगकर्ता कोई आइटम जोड़ना चाहे, getItems() नए आइटम प्राप्त करने के लिए अनुरोध किया जाए। तो, आपका कोड कुछ इस तरह दिख सकता है:

const App = () => {
    const [item, setItem] = useState([])
    const [category, setCategory] = useState([])
    const [addedItem, setAddedItem] = useState('')
    
    
    const categories = category.map(elem => ({
        value: elem.id,
        label: elem.cat,
    }));

    const [categorySelect, setCategorySelect] = React.useState(null);

    function handleChangeCategory(value) {
        setCategorySelect(value);
    }

    useEffect(() => {
        getItems()
    }, [addedItem])

    useEffect(() => {
        getCategories()
    }, [])

    const getItems = async () => {
        const response = await axios.get(REQUEST_1)
        setItem(response.data)
    }

    const getCategories = async () => {
        const response = await axios.get(REQUEST_2)
        setCategory(response.data)
    }

    const addItems = () => {
        const response = await axios.post(`${REQUEST_1}`, {cat: category_select.value});
        setAddedItem(response.data)
    };

    const body = () => {
        return item && item.map((elem,j) => {
            return (
                <tr key={elem.id}>
                    <td><span>{elem.cat}</span></td>
                </tr>
            )
        })
    }

    return (
        <>
            <div>
                <div>
                    <div>
                        <div>
                            <NoSsr>
                                <Select
                                    classes={classes}
                                    styles={selectStyles}
                                    inputId="category"
                                    TextFieldProps={{
                                        label: 'Category',
                                        InputLabelProps: {
                                        htmlFor: 'category',
                                        shrink: true,
                                        },
                                        placeholder: 'Search',
                                    }}
                                    options={categories}
                                    components={components}
                                    value={category}
                                    onChange={handleChangeCategory}
                                />
                            </NoSsr>
                            <span>Select</span>
                        </div>
                        <div>
                            <label>&nbsp;</label>
                            <span onClick={addItems}></span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>
                                                <span>Category</span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {body()}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default App;
1
Saba 27 पद 2020, 15:44