在 ReactJS 中通过 useState() 更改对象参数

Question

因此，我试图更改 .map 在大括号内调用的对象参数。这是代码：

import React, { useEffect, useState } from 'react'

function App() {
  const [news, setNews] = useState([])
  const [searchQuery, setSearchQuery] = useState('city')

  const getNews = () => {
    fetch('https://api.randomuser.me/?nat=USA&results=5')
      .then(result => result.json())
      .then(data => setNews(data.results))
      .then(error => console.log(error))
  }

  const handSearch = (e) => {
    setSearchQuery(e.target.value)
  }

  //the [] at the end is enabled to request data only onces
  useEffect(() => {
    getNews()
  }, [searchQuery])
  
  return (
    <div>
      <form>
        <input onChange={handSearch}></input>
      </form>
      <p><b>Available Input: </b>city, state, country, postcode</p>
      <hr/>
      {
        news.map((value, index) => (
          <p key={index}>{`value.location.${searchQuery}`}</p>
        ))
      }
      <p>{searchQuery}</p>
    </div>
  );
}

export default App;

但它不起作用，它只返回一个字符串。我试过：

1. 删除撇号``
2. 将大括号换成另一个括号[]
3. 为 value.location.${searchQuery} 在 return() 之外创建一个 const 并将其放回花括号中
4. 我忘记了一些其他的小改动

   如何通过${}完成一个对象参数？

   任何帮助将不胜感激，谢谢！

Answer 1

更改您的代码的这一行：

<p key={index}>{`value.location.${searchQuery}`}</p>

对此：

<p key={index}>{value.location[searchQuery]}</p>

另外，请阅读这篇文章：dynamic key。

Answer 2

您需要使用方括号来获取 searchQuery value.location[searchQuery] 的计算值

例如：

import React, { useEffect, useState } from 'react';

function App() {
  const [news, setNews] = useState([])
  const [searchQuery, setSearchQuery] = useState('city')

  const getNews = () => {
    fetch('https://api.randomuser.me/?nat=USA&results=5')
      .then(result => result.json())
      .then(data => setNews(data.results))
      .then(error => console.log(error))
  }

  const handSearch = (e) => {
    setSearchQuery(e.target.value)
  }

  //the [] at the end is enabled to request data only onces
  useEffect(() => {
    getNews()
  }, [searchQuery])
  
  return (
    <div>
      <form>
        <input onChange={handSearch}></input>
      </form>
      <p><b>Available Input: </b>city, state, country, postcode</p>
      <hr/>
      {
        news.map((value, index) => (
          <p key={index}>{value.location[searchQuery]}</p>
        ))
      }
      <p>{searchQuery}</p>
    </div>
  );
}

export default App;