使用带有两个映射的三元运算符答案

【问题标题】：using ternary operator with two map使用带有两个映射的三元运算符
【发布时间】：2021-04-03 06:08:18
【问题描述】：

我正在尝试通过编码来学习反应，在这里我想出了这个有效的代码！但只有我需要知道如何在这里使用 if else 或三元运算符。我想要实现的是：当用户访问该页面时，该页面已经存在：

{sisalto.map(({ avain, value }, index) => ( 
    <div>
        <div>
            <IndexBox y={avain} />
        </div>
        <div>
            <ValueBox value={value} />
        </div>
    </div>
))}

当用户在输入上写一些东西时，这会代替第一个：

{searchResults.map(({ avain, value }, index) => ( 
    <div>
        <div>
            <IndexBox y={avain} />
        </div>
        <div>
            <ValueBox value={value} />
        </div>
    </div>
))}

我的代码：

function App() {
  const [data, setData] = useState([])
  const [searchResults, setSearchResults] = useState([])
  const [searchTerm, setSearchTerm] = useState('')
  const [sisalto, setSisalto] = useState([])

  const fetchData = () => {
    let corsAnywhere = 'https://cors-anywhere.herokuapp.com/'
    let something = 'http://ksngfr.com/something.txt'
    fetch(corsAnywhere + something)
      .then(response => response.text())
      .then(result => {
        const theDataArr = result.replace(/\n/g, ' ')
        const f = theDataArr.split(' ')
        setData(f)
      })
  }

  useEffect(() => {
    fetchData()
  }, [searchTerm])

  useEffect(() => {
    const mappedResult = data.map(d => {
      var propertyK = d.split(':')[0]
      var propertyv = d.split(':')[1]
      return {
        avain: propertyK,
        value: propertyv
      }
    })
    setSisalto(mappedResult)

    const results = mappedResult.filter(each => each.avain === searchTerm)
    setSearchResults(results)
  }, [data, searchTerm])
  console.log(sisalto)

  return (
    <div>
      <header>
        <div>
          <h1>something</h1>
          <input
            type="text"
            value={searchTerm}
            placeholder="Search..."
            onChange={e => setSearchTerm(e.target.value)}
          />
        </div>
      </header>
      <div>
        {searchResults.map(({ avain, value }, index) => (
          <div>
            <div>
              <IndexBox y={avain} />
            </div>
            <div>
              <ValueBox value={value} />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

我正在获取的数据：

/* ------------------------

    2005-07-09 03:05
    1:74539
    2:29734
    3:95426
    4:35489

------------------------ */

【问题讨论】：

你可以做类似..searchTerm === "" ? ( sisalto.map(...)) : ( searchResults.map(..))
@DJ2 我搞定了，但仍有一个问题需要帮助？
@DJ2 它正在打印所有内容，但我不希望它打印时间和日期，这怎么可能？
您正在映射的搜索结果数组显示了所有内容？
@DJ2 这会打印所有内容 'searchResults.map(..)' 但它不应该打印时间和日期（我刚刚上传了一张数据照片）

标签： javascript html reactjs dictionary react-hooks

【解决方案1】：

你可以像这样使用三元运算符

<div>
  {
     isTrue 
       ? (<div>YEP</div>) 
       : (<div>NO</div>)
  }
</div>

现在您可以像这样使用React.Fragment 来实现您的目标 -

<div>
  {
     isTrue 
       ? (<React.Fragment>{/* map */}</React.Fragment>) 
       : (<React.Fragment>{/* map */}</React.Fragment>)
  }
</div>

// React.Fragment shorthand
<div>
  {
     isTrue 
       ? (<>{/* map */}</>) 
       : (<>{/* map */}</>)
  }
</div>

如果您不想在 else 声明中添加任何内容，就让它成为 null 就像这样

{ isTrue ? <>YEP</> : null }

【讨论】：