通过特定语言-JavaScript-React钩子动态提交

当我将屏幕的实际语言更改为另一个值时，我试图创建一个提交数据，我想知道最干净的方法是使用React钩子。现在我正在使用类似的东西，但是如果我得到世界上所有语言的话，我需要很多代码：(

someting.language将成为带有“pt”或“en”或世界上任何语言的道具

const titleValuePtProps = useSelector(something => something.language)

const titleValueEnProps = useSelector(something => something.language)

     useEffect(() => {
        if (selectedLanguage === 'pt') {
            setTitleValuePt(titleValuePtProps);
            setSelectedLanguage('pt')
        }
        if (selectedLanguage === 'en') {
         setTitleValueEn(titleValueEnProps);  
          setSelectedLanguage('en')
      
      }
    }, [selectedLanguage, city.id]);
    
    const save = (e) => {
        e.preventDefault();
        setSaving(true);
        let data;
         if (selectedLanguage === 'en') {
            data = {
                id: id,
                title: { da: titleValueEn },
                description: { da: descriptionValueEn},
                city: city.id,
             
            };
        }
        if (selectedLanguage === 'pt') {
            data = {
                id: id,
                title: { da: titleValueDa },
                description: { da: descriptionValuePt},
                city: city.id,
             
            };
        }

        dispatch(
            saveData(data, (response) => {
                dispatch(something({ id: 0, isOpen: false }));
              
            }),
        );
    };


return (
    <form onSubmit={(e) => save(e)}>
            <IntlInputLanguages
                languages={LANGUAGES}
                selectedLanguage={selectedLanguage}
                onChange={(l) => onLanguageChange(l)}
            />
            <TextField
                type="textarea"
                label="Title"
                value={supValue}
                onChange={(value) => {
                    setTitleValue(value);
                }}
            />
            <TextField
                type="textarea"
                label="Description"
                value={descriptionValue}
                onChange={(value) => {
                    setDescriptionValue(value);
                }}
            />
                <ButtonSave>Save</ButtonSave>
    </form>
);
}

const titleValuePtProps=useSelector（something=>something.language）
const titleValueProps=useSelector（something=>something.language）
useffect（（）=>{
如果（selectedLanguage=='pt'）{
setTitleValuePt（titleValuePtProps）；
setSelectedLanguage（“pt”）
}
如果（selectedLanguage=='en'）{
setTitleValueEn（TitleValueProps）；
setSelectedLanguage（'en'）
}
}，[selectedLanguage，city.id]）；
常数保存=（e）=>{
e、 预防默认值（）；
设置保存（真）；
让数据；
如果（selectedLanguage=='en'）{
数据={
id:id，
标题：{da:TitleValuen}，
描述：{da:descriptionValueEn}，
城市：city.id，
};
}
如果（selectedLanguage=='pt'）{
数据={
id:id，
标题：{da:titleValueDa}，
描述：{da:descriptionValuePt}，
城市：city.id，
};
}
派遣(
保存数据（数据，（响应）=>{
分派（某物（{id:0，isOpen:false}））；
}),
);
};
返回(
保存（e）}>
onLanguageChange（l）}
/>
{
setTitleValue（值）；
}}
/>
{
setDescriptionValue（值）；
}}
/>
拯救
);
}

我建议您将所有数据添加到单独的文件中，例如

data.json

data.json

    [
     {
       "language" : "en",
       "id" : 1,
       "title" : "English"
     },
     {
       "language" : "pt",
       "id" : 2,
       "title" : "Some title"
     }
    ]

按如下方式在组件中导入上述数据：

import data from './data.json';

Component.js:

useEffect(() => {
  let languageData = data.find(item => item.language === selectedLanguage);
  // use languageData^ to do whatever you want to do further.
},[])

在接收道具时，例如

selectedLanguage='en'

过滤数据，并将特定的数据分配给组件

data

变量，然后像已经做的那样发送api调用。

---

它将减少您的组件代码，数据将在一个单独的文件中进行系统管理。

我建议您将所有数据添加到一个单独的文件中，例如

data.json

data.json

    [
     {
       "language" : "en",
       "id" : 1,
       "title" : "English"
     },
     {
       "language" : "pt",
       "id" : 2,
       "title" : "Some title"
     }
    ]

按如下方式在组件中导入上述数据：

import data from './data.json';

Component.js:

useEffect(() => {
  let languageData = data.find(item => item.language === selectedLanguage);
  // use languageData^ to do whatever you want to do further.
},[])

在接收道具时，例如

selectedLanguage='en'

过滤数据，并将特定的数据分配给组件

data

变量，然后像已经做的那样发送api调用。

---

它将减少您的组件代码，并在一个单独的文件中系统地管理数据。

什么是useSelector，这是完整的代码吗？useSelector来自react redux，与mapStateToProps一样。不，它不是完整的代码。让我们暂时忘记react、hooks和所有这些：您可以创建一个对象：

someData={}

并将数据放入其中：

someData.en={title:“English title”}；

。现在，您只需参考

someData[selectedLanguage].title

以所选语言获取标题，而不考虑当前所选的语言。在这里，您似乎只需要使用变量作为数据对象的键，而不是某些React功能或类似功能。我尝试了类似的方法，但使用了title[语言]，似乎正在工作：DW什么是useSelector，这是完整的代码吗？useSelector来自react redux，与MapStateTops一样。不，它不是完整的代码。让我们暂时忘记react、挂钩和所有这些：您可以创建一个对象：

someData={}

并将数据放入其中：

someData.en={title:{English title}；

。现在，您可以简单地参考

someData[selectedLanguage]。title

以所选语言获取标题，而不考虑当前所选的语言。在这里，您似乎只需要使用变量作为数据对象的键，而不是某些React功能或类似功能。我尝试了类似的方法，但使用了title[language]，似乎起作用了：DNice方法，唯一的变化是我正在为languageData使用状态，所以setLanguage（languageData.value）。谢谢！我做了另一次调整，所以，我为数据创建了一个排列，在那里我调整了语言中的所有更改。很好的方法，唯一的变化是我正在为languageData使用状态，所以setLanguage（languageData.value）。谢谢！我做了另一次调整，因此，我为数据创建了一个排列，并在那里调整语言中的所有更改。