如何检查数组中的每个项目？答案

【问题标题】：How to check every item inside array?如何检查数组中的每个项目？
【发布时间】：2020-04-13 16:41:52
【问题描述】：

我有一个对象数组，并在输入中渲染其中的每个项目，在本节下，我有一个按钮可以做某事

我想检查每个“输入”项，如果它是空的，不要调用按钮上按下的函数

我的代码不适用于第一个对象，

状态

 toolsUsed: [
      {
        id: 0,
        name: '..',
        price: '..',
        count: '..',
      },
      {
        id: 1,
        name: '..',
        price: '..',
        count: '..',
      },
      ...
    ],
]

这是我的可迭代数组

renderToolsUsed = () => {
    const {toolsUsed} = this.state;

    return toolsUsed.map(({name, id, price, count}, i) => {
      console.log('i', i);
      if (
        toolsUsed[i].name.length > 0 &&
        toolsUsed[i].price.length > 0 &&
        toolsUsed[i].count.length > 0
      ) {
        this.setState({valid: true});
      }

      return(
         <View>.....</View>
      )
    }

按钮功能

 pressed = ()=>{
    if(this.state.vaild){
       call...
    }else{
        alert("please fill all fields");
    }
  }

编辑

回答@SLePort

renderToolsUsed = () => {
    const {toolsUsed} = this.state;

    return toolsUsed.map((item, i) => {
      console.log(item);
      this.setState(
        {
          // ...item,
          isValid: ['name', 'price', 'count'].every(
            key => item[key].length > 0,
          ),
        },
        () => console.log('isValid', this.state.isValid),
      );

       return (
        <View key={i} style={styles.tools}>
             <Text>{item.name}</Text>
             ...
        </View>
       );
      });
  };

【问题讨论】：

标签： javascript arrays reactjs loops

【解决方案1】：

如果要检查的每个属性都有一个length > 0，您可以循环这些项目并添加一个isValid 键。

const toolsUsed = [
  {
    id: 0,
    name: 'first',
    price: '2',
    count: '4',
  },
  {
    id: 1,
    name: 'second',
    price: 1,
    count: 8,
  },
]

const validToolsUsed = toolsUsed.map(item => ({
    ...item, 
    isValid: ['name', 'price', 'count']
      .every(key => item[key].length > 0 )
  })
)

【讨论】：

你的意思是把它添加到setState？
在setState 中添加它时工作正常，但你能解释更多吗，...item, 是什么意思，我们为什么要这样做？和item[key]?因为当我登录 item[key] 时它返回未定义！
...item 使用spread 语法在添加isValid 属性之前扩展对象的所有条目。 key 指的是['name', 'price', 'count'] 中的每个键，即您要检查其值的属性。
好吧，但我的意思是为什么在[ ] ~item[key]~ 中添加key every() 回调?？而且我没有任何标志指的是State 内的item，所以我认为我有什么问题吗？检查我在问题中的编辑部分
item 和 key 都指的是数组中正在处理的当前值。它们只是在回调中使用，与您的状态无关。在[1,2].map(e => e*2) 中，e 只是将在数组的每个项目上使用以产生[2,4] 的变量。请参阅map 了解更多信息。

【解决方案2】：

你正在做的方式，它只为第一项设置状态，在setState 被调用后触发重新渲染可能是您面临的问题可能是Array.reduce会帮助你

试试这个

 const isValid =  toolsUsed.reduce((acc, curr) => {
  if(curr.name.length && curr.price.length && curr.count.length) {
     return true
   }
   return false
   }, false
   )
this.setState({isValid })

如果你有codesandbox示例请分享，以便优化功能，请注意reduce函数的第二个参数将是累加器acc的初始值，可能你需要调整它为你的实际工作的功能

如有问题请随时提出

【讨论】：