如何更新JSON，然后再次输出？

我有一个JSON，它被直接加载和输出，用户现在可以输入一些东西，只要他按下一个按钮，JSON就会被更新（这也可以工作，在console.log（）中，它是正确输出的）我的问题是，现在我如何用更新集再次输出JSON

    import React from 'react'
    import CardItem from '../pages/CardItem'
    import PostData from '../../data/post.json'
    import './Box.css';

    const [value_Text, setValue_Text] = useState('')
    const [jsonDataDisplayed, setJsonDataDisplayed] = useState(JsonMessages)
    const sendMessage = () => {
    
            var newJson = {
            "id": jsonDataDisplayed.length+1,
            "title": value_Text
        }
       
          //console.log(jsonDataDisplayed);
          setJsonDataDisplayed({newJson})
          console.log(jsonDataDisplayed);
          // ToDo update the JSON below
          // ...
          //  First Click only the 'normal' JSON is shown with the three elements
          // Second Click only the added element is shown 
    }
    
    
    function Cards() {
        return (
          <div className='cards'>
            <div className='cards__container'>
                <div className='cards__wrapper'>
                    <ul className='cards__items'>
                    {PostData.map((postDetail, index)=>{
                        return <div>
                            <Card
                            src={postDetail.src}
                            text={postDetail.title}
                            />
                        </div>
                    })} 
                    </ul>
                </div>
            </div>
              <input type="email"  onChange={event => setValue_Text(event.target.value)} />
              <Button type="button" onChange={sendMessage}/>
          </div>
        );
      }
    
    export default Cards

---

您需要将json存储在一个状态中。 只有当与组件的jsx相关的状态发生更改时，组件才会重新加载

注意：当您使用state的set函数时，您应该给出一个新对象，而不是更新的json，因为react不会将其识别为更改

---

不要忘记更新jsx以显示postDataDisplayed而不是PostData

您需要将json存储在一个状态。 只有当与组件的jsx相关的状态发生更改时，组件才会重新加载

注意：当您使用state的set函数时，您应该给出一个新对象，而不是更新的json，因为react不会将其识别为更改

---

不要忘记更新jsx以显示postDataDisplayed而不是PostData

您可以使用另一种状态

---

工作示例

---

您可以使用另一种状态

---

工作示例

---

如何正确更新功能？使用

jsonDataDisplayed.map（（oneMessage…

我得到了错误

TypeError:jsonDataDisplayed.map不是一个函数

如何将我的新JSON添加到旧JSON中？如果我添加文本，我按下按钮，如果我再次按下按钮，旧JSON将显示给我，只有最新的JSON对象显示给我

var newJson={“id”：postDataDisplayed.length+1，“title”：value_Text，}setJsonDataDisplayed（{…newJson}）

如何更新函数权限？使用

jsonDataDisplayed.map(（oneMessage…

我得到了错误

TypeError:jsonDataDisplayed.map不是一个函数

如何将我的新JSON添加到旧JSON？如果我添加文本，我按下按钮，那么如果我再次按下按钮，旧JSON将显示给我，只有最新的JSON对象显示给我

var newJson={“id”：postdatadisplated.length+1，“title”：value_Text，}setjsondatadisplated（{…newJson}）

[ 
    {
        "id": 1,
        "title": "Text 1"
    },
    {
        "id": 2,
        "title": "Text 2"
    },
    {
        "id": 3,
        "title": "Text 3"
    }
]

const [postDataDisplayed, setPostDataDisplayed] = useState(PostData)
const sendMessage = () => {

      PostData.push(value_Text);
      console.log(JsonMessages);
      setPostDataDisplayed({...PostData}) // es6 way to clone object
}

const [value_Text, setValue_Text] = useState('')
const [dataToDisplay, setDataToDisplay] = useState(PostData);

const sendMessage = () => {

      // Please keep in mind that you getting objects out of PostData.
      // This means that you need to also pass a object.
     
       const newData = {
         id: dataToDisplay.length + 1,
         title: value_Text
       };
      
      // Update the state to your new Data set by mergin new and old together. 
      setDataToDisplay([...dataToDisplay, newData]);
    
  
}


...