使用带有两个 map 的三元运算符

Question

我正在尝试通过编码来学习反应，在这里我想出了这个有效的代码。 但只有我需要知道如何在此处使用 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

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

Answer 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 }