Question

人们，我有array of object：

＆＃13;

this.state = [{
  "456": {
    "name": "PonPon",
    "gerente": "sun2",
    "years": 25,
    "city": "W.T"
    "country": "BRAZIL"
  },
  "789": {
    "name": "PiPon",
    "gerente": "sun1",
    "years": 20,
    "city": "LAS VEGAS",
    "country": "EUA"
  }
}]

＆＃13;

和input

＆＃13;

<input/> 
<button> search </button>

＆＃13;

我想要什么。

我想要，例如：我在456中列出了数字input，我希望他返回属性：

名称
人Gerente
年
城市
国家

该属性是其他数组为空。例如：

＆＃13;

const arrayEmpty = [{
  "name": "PonPon",
  "gerente": "sun2",
  "years": 25,
  "city": "W.T",
  "country": "BRAZIL"
}]

＆＃13;

或类似的东西。

用于之后使用该数组。有人可以帮助我吗？

Answer 1

实际上不需要封装数组。你计划只使用其中的对象。这是一个示例搜索功能，您可以根据您的反应代码进行调整。

function search(idToFind) {
    const ids = {
        "456": {
            "name": "PonPon",
            "gerente": "sun2",
            "years": 25,
            "city": "W.T",
            "country": "BRAZIL"
        },
        "789": {
            "name": "PiPon",
            "gerente": "sun1",
            "years": 20,
            "city": "LAS VEGAS",
            "country": "EUA"
        }
    };
    let keys = Object.keys(ids), index = keys.indexOf(idToFind);
    if (index > -1) {
        return ids[idToFind];
    }
    return [];
}

Answer 2

所以...有一些事要做，但我有一个示例应用程序正在运行。

首先，我没有看到你的对象需要成为一个数组。这是来自API调用吗？如果没有，我建议只有一个数组，如下：

list: {
        "456": {
          "name": "PonPon",
          "gerente": "sun2",
          "years": 25,
          "city": "W.T",
          "country": "BRAZIL"
        },
        "789": {
          "name": "PiPon",
          "gerente": "sun1",
          "years": 20,
          "city": "LAS VEGAS",
          "country": "EUA"
        }
      }

现在......你需要处理你期望可能的id的输入。我创建了一个名为handleChange的函数，它在onChange事件中被触发，换句话说，只要输入被更改。

<input type='number' value={this.state.currentId} onChange={(evt) => this.handleChange(evt.target.value)} />

您现在需要一些额外的状态来存储您要查找的ID和您找到的对象（如果有）。正如您所看到的，我创建了currentId状态，它将保存您输入的任何内容以及foundObject状态，该状态将保存您找到的任何对象。

接下来，让我们看看实际的handleChange函数中的o：

首先，您将获取列表数组，并查看它，直到找到匹配id的对象，将其与输入的任何值进行比较。如果对象与此匹配，则将设置{{1这样说。

我通过遍历对象（在数组中）键来完成此操作。这是这样做的：

foundObject

当然，在这个功能结束时，不要忘记设置`currentId。

现在你拥有所需的一切。在渲染功能中，只需渲染// search for the object: Object.keys(list[0]).forEach(x => { if (x === currentId) { console.log('hello') this.setState({foundObject: list[0][x]}) } })。

以下是该应用的工作版本：

＆＃13;

foundObject

＆＃13;

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      currentId: null,
      list: [{
        "456": {
          "name": "PonPon",
          "gerente": "sun2",
          "years": 25,
          "city": "W.T",
          "country": "BRAZIL"
        },
        "789": {
          "name": "PiPon",
          "gerente": "sun1",
          "years": 20,
          "city": "LAS VEGAS",
          "country": "EUA"
        }
      }],
      foundObject: null
    }
  }
  handleChange(currentId) {
    const { list } = this.state
    
    // search for the object:
    Object.keys(list[0]).forEach(x => {
      if (x === currentId) {
        console.log('hello')
        this.setState({foundObject: list[0][x]})
      }
    })
    
    this.setState({currentId: currentId})
  }
  
  render(){
    const { foundObject } = this.state
    const renderObject = foundObject ? (
      <div>
        <p>Name: {foundObject.name}</p>
        <p>Gerente: {foundObject.gerente}</p>
        <p>Years: {foundObject.years}</p>
        <p>...</p>
      </div>
    ) : <p>No objects of this id were found.</p>
    return (
     <div>
        <input 
          type='number'
          value={this.state.currentId}
          onChange={(evt) => this.handleChange(evt.target.value)}
         />
        <h3>Found object:</h3>
        {renderObject}
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

＆＃13;

如何使用ReactJS获取对象的属性？

2 个答案: