项目表格

Question

我是React的初学者，在参加了几堂在线课程后，我开始构建自己的第一个真实表单。目前，我一直试图将JSON API数据Feed中的值适合可重用的Select组件。如果我将道具硬编码到Select中，则可以使它工作，但是那样就无法重用了！我敢肯定，答案非常简单，但是在尝试了各种类型的映射后，我只是想不出来。这是JSON数据结构– { “ fkIDTeam”：1 “ IDProject”：5 “项目”：“刘易斯街”， “有效”：1 } 从这里开始，我有一个项目表单，该表单使用可重用的Form组件，然后使用可重用的Select组件。从顶部开始，这是我的项目表单代码– 从“反应”导入React；从“ ./common/form”导入表格；从“ ../services/projectService”导入{getProjects}; FormProject类扩展Form { 状态= { 数据：{ }，项目：[] }; 异步populateProjects（）{ const {data：projects} =等待getProjects（）; this.setState（{projects}）; console.log（{项目}）; } 异步componentDidMount（）{ 等待this.populateProjects（）; } render（）{ 返回（

项目表格

）; } } 导出默认的FormProject; 请注意，我已经确认我正在获取期望的JSON数据，可以在上述console.log语句之后的控制台中看到该数据。接下来，我们有可重用的Form组件– 从“反应”中导入React，{组件}；从“ ./input”导入输入；导入从“ ./select”中选择；类Form扩展Component { 状态= { 数据：{} }; renderButton（label）{ 返回（）; } renderInput（名称，标签，类型=“文本”）{ const {data} = this.state; 返回（ <输入类型= {类型} 名称= {名称} 值= {数据[名称]} 标签= {标签} onChange = {this.handleChange} /> ）; } renderSelect（名称，标签，选项）{ const {data} = this.state; 返回（ <选择名称= {名称} 值= {数据[名称]} 标签= {标签} 选项= {选项} onChange = {this.handleChange} /> ）; } } 导出默认表格；最后，我们有可重用的Select组件从“反应”导入React； const Select =（{{name，label，options，... rest}）=> { console.log（{options}）; 返回（

{label}

）; }; 导出默认选择；如果将如下所示的“ option.id”更改为“ option.IDProject”，将“ option.name”更改为“ option.Project”，则在下拉列表中将获得完整的可用值集。但是，如果我将可重用的“通用”文本保留在上面的位置，则我的选择为空白，并且出现了常见的“唯一键道具”错误。从“反应”导入React； const Select =（{{name，label，options，... rest}）=> { console.log（{options}）; 返回（

{label}

）; }; 导出默认选择；那么，我在这里想念什么？如何在项目表单组件中映射我的JSON数据，使其与我的Form和Select可重用组件一起使用？在此先感谢您的帮助！乔尔

Answer 1

如果要使用通用组件（如上面定义的“选择一个组件”），则必须确保数据的格式符合组件的需求。在您的情况下，根据您的映射功能，每个项目都需要一个.id和一个.name：

public function updating($allestate) 
{
    if ($allestate->wasChanged(['price']) {
        $allestate->old_price = $allestate->getOriginal('price');
        $allestate->save();
    }
}

因此，一种解决方案是在将数据捕获到诸如以下对象之类时重新格式化数据：

    {options.map(option => (
      <option key={option.id} value={option.id}>
        {option.name}
      </option>
    ))}

这可以通过在componentDidMount（）方法中使用.map函数来完成。

另一种解决方案是将props传递给您的可重用组件，以告知要查找的字段：

{
    "fkIDTeam": 1,
    "id": 5,
    "name": "Lewis Street",
    "active": 1
}

然后像这样调用您的组件：

import React from "react";

const Select = ({ name, label, options, idKey, nameKey ...rest }) => {
  console.log({ options });
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <select name={name} id={name} {...rest} className="form-control">
        <option value="" />
        {options.map(option => (
          <option key={option[idKey]} value={option[idKey]}>
            {option[nameKey]}
          </option>
        ))}
      </select>
    </div>
  );
};

export default Select;

Answer 2

您可以在这里做两件事。

将道具添加到可重用的Select组件中，该组件将指定传递给它的数据与其必须显示的选项之间的映射。因此，您可以将类似这样的选择组件传递给

<Select ... options={options} mappingConfig={config} />

const  config = { id: "IDProject", name: "Project" }

现在在“选择组件”内部，您可以执行

{options.map(option => (
      <option key={option[mappingConfig.id]} value={option[mappingConfig.id]}>
        {option[mappingConfig.name]}
      </option>
    ))}

更改数据格式以匹配“选择组件”选项。

Answer 3

您缺少JSON数据结构中的键。您所需要做的就是查看JSON，以提供正确的密钥，在这种情况下，密钥为public void release() { if (exoPlayer != null) { exoPlayer.removeListener(eventListener); exoPlayer.release(); exoPlayer = null; dataSpec =null; assetDataSource = null; factory = null; audioSource =null; } } @Override public void onBackPressed() { // TODO Auto-generated method stub super.onBackPressed(); setPlayPause(false); release(); finish(); }和id。除此之外，如果您要处理不同的有效负载，则可以将密钥作为道具传递给name组件。

React-如何将JSON API数据放入可重用的<select>组件

项目表格

3 个答案: