Javascript 为每个新状态创建新段落，而不是更新有状态组件

当我单击CreateSalesOrder按钮时，我执行一个API调用，并将响应打印为有状态组件。但是我不想更新我的有状态组件，而是想为我得到的每个响应创建一个新的段落，因此如果用户按下按钮5x，他就有5个带有响应的段落

我怎样才能做到这一点？我曾想过将响应推送到数组，但我不确定这一点

function ContentFunction () {
  const [value, setValue] = useState()

  function sendText (data) {
    setValue(data)
  }

  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 response instead of just updating this */}
        <p>{value}</p>
      </div>
    </main>
  )
}

将值用作数组 示例代码：

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 response instead of just updating this */}
        {value.map(item => <p key={value}>{value}</p>)} //render value array
      </div>
    </main>
  )
}

---

您并不需要调用set state钩子的函数，您使用数组的想法是正确的，您可以为每个响应推送到数组，然后映射为每个响应返回一个段落的数据

虽然通常在React中映射数据时，您需要创建一个组件来呈现所述数据

function ContentFunction () {
  const [values, setValues] = useState([])

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

        })

        setValues([...values], 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>
        {values.map(value => <p key={value}>{value}</p>)}
      </div>
    </main>
  )
}

---

这不会运行，它会抛出未定义的值try now Jango请问如何在段落中添加换行符？以下操作不起作用{value.mapitem=>

{value}

}不，应该使用CSS设置元素的样式。示例：我刚刚注意到一个问题，它创建了多个段落，但每个段落都包含整个数组，我只想显示新项目，如何实现这一点？您可以上传布局吗？