插入项目之前的条件并在reactjs中显示消息

Posted 2023-02-22

【中文标题】插入项目之前的条件并在reactjs中显示消息

【英文标题】：Condition before inserting an item and show message in reactjs

【发布时间】：2021-04-04 13:25:52

【问题描述】：

我正在用 React.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: 'Category...',
                                    
                                    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;

想法是检查要插入的项目是否已经存在，如果已经插入，则通过弹出窗口显示消息。

如何在const addItems = () => ... 和弹出窗口中添加此条件？我必须把那个条件放在这里吗？

我该怎么做，建议？

【参考方案1】：

您应该检查addItems方法中是否已经存在所选类别。

您可以使用像reactjs-popup 这样的 React 包来显示一个弹出窗口。

const [isShow, setIsShow] = useState(false)

const addItems = () => 
    // check if selected category already exists
    if (!category.some(elem => elem.cat === category_select.value))  
        axios.post(`$REQUEST_1`, cat: category_select.value);
    
    else 
        // update popup modal open state and display popup
        setIsShow(true);
    
;

...
return (
...
 isShow && <h1>Error</h1> 
...)

【讨论】：

您好，感谢您的帮助！如何返回弹窗？例如，我尝试使用此 else return (<h1>hello</h1>);，但它没有显示任何内容

嘿@bonnegnu，它不是渲染函数。只需处理添加项目逻辑。如果要渲染某些内容，则应更新要显示的元素的显示状态。然后根据其状态在返回函数中显示该元素。