數組中每個元素的新段落

Question

我有一個有狀態的組件，它從 api 調用中獲取數據。 我想為該數組的每個項目打印一個新段落。 現在它為每個項目打印一個新段落，但該段落包含整個數組..

 function ContentFunction () {
  const [value, setValue] = useState([]) //init with empty array

  function sendText (data) {
    setValue([...value, data]) //Push new data into array
  }

  async function handleClick (event) {
    switch (event.target.id) {
      case 'createSalesOrder':
      {
        const res = await axios.post('http://localhost:5000/', {
          buttonClicked: 'createSalesOrder'

        })

        sendText(res.data)
        break
      }

      default:
        console.log('click didnt work')
    }
  }

  return (
    <main>
      <div className='container'>
        <Form>
          <Form.Group>
            <Button variant='success' className='button' onClick={handleClick} id='createSalesOrder'>Create Sales Order</Button>
          </Form.Group>
        </Form>
  {/* Here I want to create a new Paragraph for every Entry of the Array
        {value.map(item => <p key={value}>{value}</p>)} //render value array
      </div>
    </main>
  )
}

Answer 1

你快到了

                                    //change this from `value` to `item`
 {value.map(item => <p key={value}>{item}</p>)}

在地圖中，第一個參數（在您的情況下為item ）是當前迭代中的元素。

您還可以傳遞第二個參數，該參數將是您可以像這樣用於鍵的索引

 {value.map((item,index) => <p key={index}>{item}</p>)}

（注意在參數item,index周圍添加了() ）

Answer 2

你很接近，只需在地圖中調用 item 變量：

  {value.map(item => <p key={value}>{item}</p>)} //render value array

此外，您希望 key 是唯一的，因此請考慮更改為數組中項目的索引，如下所示：

{value.map((item, i) => <p key={i}>{item}</p>)} //render value array