我的多选不起作用，无法将数据保存到数据库中

Question

我尝试创建一个添加国家列表的函数。但是它不能在最后一个输入(Những ngôn ngdịch)中工作。我无法将其保存到数据库中。我该怎么办?

我尝试在最后一个输入中添加尽可能多的国家。但它没有显示出来。下面是我的代码:

import '../../css/style.css';
import { useEffect } from "react";
import { useState, useSelector } from "react";
import { ajaxCallGetUrlDemo, ajaxCallPost } from "../libs/base";
import Select from 'react-select'
import { Const_Libs } from "../libs/Const_Libs";

const ModalAddNgonNgu = (props) => {
const { handleGetLanguage } = props;
const [ngonNgu, setNgonNgu] = useState({
language_name: '',
main_lang: '',
title_lang: '',
describe_lang: '',
author_lang: '',
rate_lang: '',
reviews_lang: '',
// translate_list: []
translate_list: []
});
function SelectMainLanguage() {
const [selectedOption, setSelectedOption] = useState({});
const options = [
{ value: 'Vietnamese', label: 'Vietnamese' },
{ value: 'English', label: 'English' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'German', label: 'German' },
];
const handleChangeOption = () => {
return setSelectedOption;
}
useEffect(() => {
if (selectedOption.value) {
console.log(selectedOption)
setNgonNgu({ ...ngonNgu, main_lang: selectedOption.value })
}
}, [selectedOption])
// {console.log(selectedOption)}
return (
<Select className={`col-12 o-languages`}
value={ngonNgu.main_lang ? { value: ngonNgu.main_lang, label: ngonNgu.main_lang } : { value: "Chọn ngôn ngữ chính", label: "Chọn ngôn ngữ chính" }}
onChange={handleChangeOption()}
options={options} />
)
}
function SelectTransLanguage() {
const [selectedOption, setSelectedOption] = useState({});
const options = [
{ value: "AF", label: "Afghanistan" },
{ value: "AL", label: "Albania" },
{ value: "DZ", label: "Algeria" },
{ value: "AS", label: "American Samoa" },
{ value: "AD", label: "Andorra" },
{ value: "AO", label: "Angola" },
{ value: "AI", label: "Anguilla" },
{ value: "AQ", label: "Antarctica" },
{ value: "AG", label: "Antigua And Barbuda" },
{ value: "AR", label: "Argentina" },
{ value: "AM", label: "Armenia" },
{ value: "AW", label: "Aruba" },
{ value: "AU", label: "Australia" },
{ value: "AT", label: "Austria" },
{ value: "AZ", label: "Azerbaijan" },
{ value: "BS", label: "Bahamas The" },
{ value: "BH", label: "Bahrain" },
{ value: "BD", label: "Bangladesh" },
{ value: "BB", label: "Barbados" },
{ value: "BY", label: "Belarus" },
{ value: "BE", label: "Belgium" },
{ value: "BZ", label: "Belize" },
{ value: "BJ", label: "Benin" },
{ value: "BM", label: "Bermuda" },
{ value: "BT", label: "Bhutan" },
{ value: "BO", label: "Bolivia" },
{ value: "BA", label: "Bosnia and Herzegovina" },
{ value: "BW", label: "Botswana" },
{ value: "BV", label: "Bouvet Island" },
{ value: "BR", label: "Brazil" },
{ value: "IO", label: "British Indian Ocean Territory" },
{ value: "BN", label: "Brunei" },
{ value: "BG", label: "Bulgaria" },
{ value: "BF", label: "Burkina Faso" },
{ value: "BI", label: "Burundi" },
{ value: "KH", label: "Cambodia" },
{ value: "CM", label: "Cameroon" },
{ value: "CA", label: "Canada" },
{ value: "CV", label: "Cape Verde" },
{ value: "KY", label: "Cayman Islands" },
{ value: "CF", label: "Central African Republic" },
{ value: "TD", label: "Chad" },
{ value: "CL", label: "Chile" },
{ value: "CN", label: "China" },
{ value: "CX", label: "Christmas Island" },
{ value: "CC", label: "Cocos (Keeling) Islands" },
{ value: "CO", label: "Colombia" },
{ value: "KM", label: "Comoros" },
{ value: "CG", label: "Congo" },
{ value: "CD", label: "Congo The Democratic Republic Of The" },
{ value: "CK", label: "Cook Islands" },
{ value: "CR", label: "Costa Rica" },
{ value: "CI", label: "Cote D'Ivoire (Ivory Coast)" },
{ value: "HR", label: "Croatia (Hrvatska)" },
{ value: "CU", label: "Cuba" },
{ value: "CY", label: "Cyprus" },
{ value: "CZ", label: "Czech Republic" },
{ value: "DK", label: "Denmark" },
{ value: "DJ", label: "Djibouti" },
{ value: "DM", label: "Dominica" },
{ value: "DO", label: "Dominican Republic" },
{ value: "TP", label: "East Timor" },
{ value: "EC", label: "Ecuador" },
{ value: "EG", label: "Egypt" },
{ value: "SV", label: "El Salvador" },
{ value: "GQ", label: "Equatorial Guinea" },
{ value: "ER", label: "Eritrea" },
{ value: "EE", label: "Estonia" },
{ value: "ET", label: "Ethiopia" },
{ value: "XA", label: "External Territories of Australia" },
{ value: "FK", label: "Falkland Islands" },
{ value: "FO", label: "Faroe Islands" },
{ value: "FJ", label: "Fiji Islands" },
{ value: "FI", label: "Finland" },
{ value: "FR", label: "France" },
{ value: "GF", label: "French Guiana" },
{ value: "PF", label: "French Polynesia" },
{ value: "TF", label: "French Southern Territories" },
{ value: "GA", label: "Gabon" },
{ value: "GM", label: "Gambia The" },
{ value: "GE", label: "Georgia" },
{ value: "DE", label: "Germany" },
{ value: "GH", label: "Ghana" },
{ value: "GI", label: "Gibraltar" },
{ value: "GR", label: "Greece" },
{ value: "GL", label: "Greenland" },
{ value: "GD", label: "Grenada" },
{ value: "GP", label: "Guadeloupe" },
{ value: "GU", label: "Guam" },
{ value: "GT", label: "Guatemala" },
{ value: "XU", label: "Guernsey and Alderney" },
{ value: "GN", label: "Guinea" },
{ value: "GW", label: "Guinea-Bissau" },
{ value: "GY", label: "Guyana" },
{ value: "HT", label: "Haiti" },
{ value: "HM", label: "Heard and McDonald Islands" },
{ value: "HN", label: "Honduras" },
{ value: "HK", label: "Hong Kong S.A.R." },
{ value: "HU", label: "Hungary" },
{ value: "IS", label: "Iceland" },
{ value: "IN", label: "India" },
{ value: "ID", label: "Indonesia" },
{ value: "IR", label: "Iran" },
{ value: "IQ", label: "Iraq" },
{ value: "IE", label: "Ireland" },
{ value: "IL", label: "Israel" },
{ value: "IT", label: "Italy" },
{ value: "JM", label: "Jamaica" },
{ value: "JP", label: "Japan" },
{ value: "XJ", label: "Jersey" },
{ value: "JO", label: "Jordan" },
{ value: "KZ", label: "Kazakhstan" },
{ value: "KE", label: "Kenya" },
{ value: "KI", label: "Kiribati" },
{ value: "KP", label: "Korea North" },
{ value: "KR", label: "Korea South" },
{ value: "KW", label: "Kuwait" },
{ value: "KG", label: "Kyrgyzstan" },
{ value: "LA", label: "Laos" },
{ value: "LV", label: "Latvia" },
{ value: "LB", label: "Lebanon" },
{ value: "LS", label: "Lesotho" },
{ value: "LR", label: "Liberia" },
{ value: "LY", label: "Libya" },
{ value: "LI", label: "Liechtenstein" },
{ value: "LT", label: "Lithuania" },
{ value: "LU", label: "Luxembourg" },
{ value: "MO", label: "Macau S.A.R." },
{ value: "MK", label: "Macedonia" },
{ value: "MG", label: "Madagascar" },
{ value: "MW", label: "Malawi" },
{ value: "MY", label: "Malaysia" },
{ value: "MV", label: "Maldives" },
{ value: "ML", label: "Mali" },
{ value: "MT", label: "Malta" },
{ value: "XM", label: "Man (Isle of)" },
{ value: "MH", label: "Marshall Islands" },
{ value: "MQ", label: "Martinique" },
{ value: "MR", label: "Mauritania" },
{ value: "MU", label: "Mauritius" },
{ value: "YT", label: "Mayotte" },
{ value: "MX", label: "Mexico" },
{ value: "FM", label: "Micronesia" },
{ value: "MD", label: "Moldova" },
{ value: "MC", label: "Monaco" },
{ value: "MN", label: "Mongolia" },
{ value: "MS", label: "Montserrat" },
{ value: "MA", label: "Morocco" },
{ value: "MZ", label: "Mozambique" },
{ value: "MM", label: "Myanmar" },
{ value: "NA", label: "Namibia" },
{ value: "NR", label: "Nauru" },
{ value: "NP", label: "Nepal" },
{ value: "AN", label: "Netherlands Antilles" },
{ value: "NL", label: "Netherlands The" },
{ value: "NC", label: "New Caledonia" },
{ value: "NZ", label: "New Zealand" },
{ value: "NI", label: "Nicaragua" },
{ value: "NE", label: "Niger" },
{ value: "NG", label: "Nigeria" },
{ value: "NU", label: "Niue" },
{ value: "NF", label: "Norfolk Island" },
{ value: "MP", label: "Northern Mariana Islands" },
{ value: "NO", label: "Norway" },
{ value: "OM", label: "Oman" },
{ value: "PK", label: "Pakistan" },
{ value: "PW", label: "Palau" },
{ value: "PS", label: "Palestinian Territory Occupied" },
{ value: "PA", label: "Panama" },
{ value: "PG", label: "Papua new Guinea" },
{ value: "PY", label: "Paraguay" },
{ value: "PE", label: "Peru" },
{ value: "PH", label: "Philippines" },
{ value: "PN", label: "Pitcairn Island" },
{ value: "PL", label: "Poland" },
{ value: "PT", label: "Portugal" },
{ value: "PR", label: "Puerto Rico" },
{ value: "QA", label: "Qatar" },
{ value: "RE", label: "Reunion" },
{ value: "RO", label: "Romania" },
{ value: "RU", label: "Russia" },
{ value: "RW", label: "Rwanda" },
{ value: "SH", label: "Saint Helena" },
{ value: "KN", label: "Saint Kitts And Nevis" },
{ value: "LC", label: "Saint Lucia" },
{ value: "PM", label: "Saint Pierre and Miquelon" },
{ value: "VC", label: "Saint Vincent And The Grenadines" },
{ value: "WS", label: "Samoa" },
{ value: "SM", label: "San Marino" },
{ value: "ST", label: "Sao Tome and Principe" },
{ value: "SA", label: "Saudi Arabia" },
{ value: "SN", label: "Senegal" },
{ value: "RS", label: "Serbia" },
{ value: "SC", label: "Seychelles" },
{ value: "SL", label: "Sierra Leone" },
{ value: "SG", label: "Singapore" },
{ value: "SK", label: "Slovakia" },
{ value: "SI", label: "Slovenia" },
{ value: "XG", label: "Smaller Territories of the UK" },
{ value: "SB", label: "Solomon Islands" },
{ value: "SO", label: "Somalia" },
{ value: "ZA", label: "South Africa" },
{ value: "GS", label: "South Georgia" },
{ value: "SS", label: "South Sudan" },
{ value: "ES", label: "Spain" },
{ value: "LK", label: "Sri Lanka" },
{ value: "SD", label: "Sudan" },
{ value: "SR", label: "Suriname" },
{ value: "SJ", label: "Svalbard And Jan Mayen Islands" },
{ value: "SZ", label: "Swaziland" },
{ value: "SE", label: "Sweden" },
{ value: "CH", label: "Switzerland" },
{ value: "SY", label: "Syria" },
{ value: "TW", label: "Taiwan" },
{ value: "TJ", label: "Tajikistan" },
{ value: "TZ", label: "Tanzania" },
{ value: "TH", label: "Thailand" },
{ value: "TG", label: "Togo" },
{ value: "TK", label: "Tokelau" },
{ value: "TO", label: "Tonga" },
{ value: "TT", label: "Trinidad And Tobago" },
{ value: "TN", label: "Tunisia" },
{ value: "TR", label: "Turkey" },
{ value: "TM", label: "Turkmenistan" },
{ value: "TC", label: "Turks And Caicos Islands" },
{ value: "TV", label: "Tuvalu" },
{ value: "UG", label: "Uganda" },
{ value: "UA", label: "Ukraine" },
{ value: "AE", label: "United Arab Emirates" },
{ value: "GB", label: "United Kingdom" },
{ value: "US", label: "United States" },
{ value: "UM", label: "United States Minor Outlying Islands" },
{ value: "UY", label: "Uruguay" },
{ value: "UZ", label: "Uzbekistan" },
{ value: "VU", label: "Vanuatu" },
{ value: "VA", label: "Vatican City State (Holy See)" },
{ value: "VE", label: "Venezuela" },
{ value: "VN", label: "Vietnam" },
{ value: "VG", label: "Virgin Islands (British)" },
{ value: "VI", label: "Virgin Islands (US)" },
{ value: "WF", label: "Wallis And Futuna Islands" },
{ value: "EH", label: "Western Sahara" },
{ value: "YE", label: "Yemen" },
{ value: "YU", label: "Yugoslavia" },
{ value: "ZM", label: "Zambia" },
{ value: "ZW", label: "Zimbabwe" }
];
const handleChangeOption = () => {
return setSelectedOption;
}
useEffect(() => {
if (selectedOption.value) {
console.log(selectedOption)
setNgonNgu({ ...ngonNgu, translate_list: selectedOption.value })
}
}, [selectedOption])
{console.log(selectedOption)}
return (
<Select className={`col-12 o-languages`}
isMulti
value={ngonNgu.translate_list ? { value: ngonNgu.translate_list, label: ngonNgu.translate_list } : { value: "Chọn những ngôn ngữ dịch", label: "Chọn những ngôn ngữ dịch" }}
onChange={handleChangeOption()}
options={options} />
)
}
const handleSubmit = () => {
let arr = [{
nameLanguage: ngonNgu.language_name,
mainLanguage: ngonNgu.main_lang,
titleLanguage: ngonNgu.title_lang,
descriptionLanguage: ngonNgu.describe_lang,
authorLanguage: ngonNgu.author_lang,
rateLanguage: ngonNgu.rate_lang,
reviewsLanguage: ngonNgu.reviews_lang,
transLanguage: ngonNgu.translate_list
}]
ajaxCallPost(`save-lang`, arr).then(rs => {
resetData()
handleGetLanguage();
Const_Libs.TOAST.success("Thêm thành công")
})
}
const resetData = () => {
setNgonNgu({
language_name: '',
main_lang: '',
title_lang: '',
describe_lang: '',
author_lang: '',
rate_lang: '',
reviews_lang: '',
translate_list: []
})
}

return (
<>
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModalAddNgonNgu" style={{ fontSize: '14px' }}>
Thêm
</button>
<div>
<div className="modal fade" id="myModalAddNgonNgu">
<div className="modal-dialog modal-dialog-centered" style={{ minWidth: '700px' }}>
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Thêm ngôn ngữ</h4>
<button type="button" className="btn-close" data-bs-dismiss="modal" />
</div>
<div className="modal-body">
<form>
<div className="col">
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tên ngôn ngữ</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tên ngôn ngữ...."
value={ngonNgu.language_name}
onChange={(e) => setNgonNgu({ ...ngonNgu, language_name: e.target.value })}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tiêu đề</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tiêu đề...."
value={ngonNgu.title_lang}
onChange={(e) => setNgonNgu({ ...ngonNgu, title_lang: e.target.value })}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Mô tả</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập mô tả...."
value={ngonNgu.describe_lang}
onChange={(e) => setNgonNgu({ ...ngonNgu, describe_lang: e.target.value })}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tác giả</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tác giả (VD: Author)"
value={ngonNgu.author_lang}
onChange={(e) => setNgonNgu({ ...ngonNgu, author_lang: e.target.value })}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Đánh giá</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập đánh giá (VD: Rate)"
value={ngonNgu.rate_lang}
onChange={(e) => setNgonNgu({ ...ngonNgu, rate_lang: e.target.value })}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Lượt đánh giá</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập lượt đánh giá (VD: reviews)"
value={ngonNgu.reviews_lang}
onChange={(e) => setNgonNgu({ ...ngonNgu, reviews_lang: e.target.value })}
/>
</div>
</div>
<div className="col">
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Ngôn ngữ chính</label>
<SelectMainLanguage />
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Những ngôn ngữ dịch</label>
<SelectTransLanguage />
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-success" data-bs-dismiss="modal" onClick={handleSubmit}>Submit</button>
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default ModalAddNgonNgu;

后端没问题，所以问题是这个。你能告诉我错误在哪里吗?谢谢你

Answer 1

永远不要在另一个组件中定义一个组件。

将SelectMainLanguage和SelectTransLanguage移出ModalAddNgonNgu。

然后用props连接这两个组件和ModalAddNgonNgu。

:

const ModalAddNgonNgu = (props) => {
const { handleGetLanguage } = props; ....
... rest of the component
} // end of ModalAddNgonNgu definition
function SelectTransLanguage({setNgonNgu}) { // setNgonNgu comes from ModalAddNgonNgu
const [selectedOption, setSelectedOption] = useState({}) ....
}