reactjs 当text1和text2匹配时,如何控制台记录一些东西?

aydmsdu9  于 2023-01-25  发布在  React
关注(0)|答案(2)|浏览(125)
type hereimport './App.css';
import { useState } from 'react';

function App() {
  const [text, setText] = useState()

  const People = {
    name: 'jack'
  }
  const peoples = People.map(() => ({
    nick: People.name
  })
  )

  const funct = () =>{
    if (text === peoples.nickname) {
      console.log('worked')
    } else {
      console.log('not worked')
    }
  }

  return (
    <div>
      <input onChange={(event) => {setText(event.target.value)}}/>
      <h1>{text}</h1>
      <br />
      <button onClick={funct}>Click</button>
    </div>
  );

}

export default App;

我希望你能解答我的问题,并告诉我,我错在哪一点上,非常感谢,我试着Map文本,但还是不行,我也试着把文本作为对象,但还是不行。

bxgwgixi

bxgwgixi1#

当试图创建一个数组的人时,你试图在一个对象上使用map。这是不可能的,因为你只能在一个数组上使用map
要解决此问题,您可以执行类似以下操作来创建一个数组,其中包含一个新对象,该对象包含一个属性nick,其值为People.name

const peoples = [{ nick: People.name }];

然后在if语句中检查peoples.nickname,而我们刚刚创建了一个属性为nick的对象。

if (text === peoples.nick) {
  ...
}

现在这个方法还不起作用,就像注解中提到的,你在比较一个***字符串***和一个***数组***,要解决这个问题,你可以使用一些循环

const funct = () => {
  for (const people of peoples) {
    if (text === people.nick) {
      console.log("worked");
    } else {
      console.log("did not work");
    }
  }
};

或者,我们可以使用every函数来检查数组中的所有人是否与text值匹配

const funct = () => {
  const allPeoplesValidNick = peoples.every((people) => people.nick === text);

  if (allPeoplesValidNick) {
    console.log("worked");
  } else {
    console.log("not worked");
  }
};
mqxuamgl

mqxuamgl2#

你在比较一个数组和一个字符串,正因为如此,它不起作用.
你需要把你的funct更新成这样:

const funct = () =>{
    peoples.forEach((p) => {
     if (p.nickname === text) {
       console.log('worked')
     } else {
       console.log('not worked')
     }
    })
  }

相关问题