Question

问题：我有一个状态。我想在这种状态下实现价值。但是数组中的值。

  state = {
    base: [ {tomato: false}, {egg: false} ],
    contents: [
      {mushroom: false},
      {olive: false},
      {greenPepper: false},
      {sausage: false},
      {tomato: false},
      {redPapper: false}
    ]
  };

class Preivew extends React.Component{
  state = {
    base: this.props.contents.base  
  };

  getBase = () => {
    return(
      this.state.base.map( (value) => {
        console.log(value)
      } )
    )
  }

  render(){
    return(
      <Wrap>
        <div className={classes.imageBox}>
          <div className={classes.image}>
          {console.log(this.getBase())} 
          </div>
        </div>
      </Wrap>
    )
  } 
};

输出：

{西红柿：假}

{egg：false}

我想在这里达到“假”。因为我要用“ if else”检查操作。

Answer 1

您可以获得Object.values()

的第一个元素

getBase = () => {
    return(
      this.state.base.map( (value) => {
        console.log(Object.values(value)[0])
      } )
    )
  }

Answer 2

this.state.base.map( (value) => {
    Object.keys(value).forEach(key => {
        console.log(value[key])
    })
}

您可以将Object.keys与forEach结合使用来解决此问题。

Answer 3

使用Object.values。

getBase = () => this.state.base.map(value => Object.values(value)[0])

Answer 4

更新此属性

 getBase = (ingredient) => {
        const ingPresent = this.state.base.find(value => value[ingredient] != undefined);
        return ingPresent ? ingPresent[ingredient] : false;
    };

在渲染中

render(){
    {this.getBase('tomato') && (
        <p>Hello tomato present</p>
    )}
}

该函数还可以处理基本数组不包含成分的情况

我无法访问状态为array的值

4 个答案: