Question

当我向数据库添加另一个音符时，我想要做的就是重新渲染音符列表。我尝试了几种方法甚至redux dispatch方法。但没有一个工作，它有点意义，因为当我添加一个注释我不添加任何东西，所以它可以通过/budget获得更新的注释。也许我有一个很大的误解。

这是我如何添加新笔记

export function saveOneNote() {
  // saving a note

  const _id = $('input[name="_id"]').val(),
    firstItem = $('input[name="firstItem"]').val(),
    firstPrice = $('input[name="firstPrice"]').val(),
    secondItem = $('input[name="secondItem"]').val(),
    secondPrice = $('input[name="secondPrice"]').val(),
    thirdItem = $('input[name="thirdItem"]').val(),
    thirdPrice = $('input[name="thirdPrice"]').val(),
    tBudget = $('input[name="tBudget"]').val();

  let currency = $("#currency").val();
  console.log(currency);
  $.ajax({
    url: "/newNote",
    type: "post",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify({
      currency,
      _id,
      firstItem,
      firstPrice,
      secondItem,
      secondPrice,
      thirdItem,
      thirdPrice,
      tBudget
    }),
    success: function(Data) {
      console.log("note was saved!", Data);
    },
    error: function(err, status, xhr) {
      console.log("err", err);
    }
  });
}

这是我如何获取笔记

 class ShowAll extends Component {
    constructor(props){
      super(props);

        this.state = {
          Data: [],
          length:[],
          searchbyid:[],
          isLoggedIn:[]
        }
    }

    componentDidMount(){
        // fetch notes

        Rquest.get('/budget').then((res)=>{
          let DataString = Array.from(res.body);

          this.setState((prevState,props)=>{
              return {
                Data: DataString,
                length: res.body.length
            }
          })
        }).catch((err)=> {
          console.log(err);
        })

          // check if user is logged in
          Request.get('/auth').then((user)=>{
            if(user){
                this.setState({
                    isLoggedIn: true
                })
            }
          }).catch((err)=> {
              this.setState({
                  isLoggedIn: false
              })
          });
        }
        render(){
          const count = this.state.length;
          const myNotes = this.state.Data;
          const isLoggedIn = this.state.isLoggedIn;
          const listItems = myNotes.map((dynamicData)=>{
          return(
            <Fragment key={dynamicData.id}>
            <div className='jumbotron'>
              <div className='row'>
              <button className='btn btn-danger delete-note-btn' onClick={DeleteOneNote}>Delete</button>
                <input className='col-12 title form-control' id='deleteById' value={dynamicData._id} readOnly/>
                <div className="dropdown-divider"></div> {/*line divider*/}
                  <div className='col-6' >
                    <ul className='list-unstyled'>
                      <li className='items'>items</li>
                      <li >{dynamicData.firstItem}</li>
                      <li >{dynamicData.secondItem}</li>
                      <li >{dynamicData.thirdItem}</li>
                      {/* <li>Total Budget :</li> */}
                    </ul>
                  </div>

                  <div className='dynamicData col-6'>
                    <ul className ='list-unstyled'>
                      <li className='prices'>Prices</li>
                      <li>{dynamicData.firstPrice} {dynamicData.currency}</li>
                      <li>{dynamicData.secondPrice} {dynamicData.currency}</li>
                      <li>{dynamicData.thirdPrice} {dynamicData.currency}</li>
                    </ul>
                  </div>
                    </div>
                    <h3 className='col-12 totalprice'>{dynamicData.tBudget} {dynamicData.currency}</h3>
                  </div>
            </Fragment>
            )
      })
        return (
          <Fragment>
              {isLoggedIn ===true?(
                <div className='myNotesList '>
                number of notes :  {count}
                {listItems}
                </div>
            ):(
              <Fragment>
                </Fragment>
            )
              }
          </Fragment>
          )
      }
  }

Answer 1

React组件在var object = JSON.parse('{"e":{"name":"tushar","id":"123","tag":{}}}'); console.log(object.e.name); // Outputs tushar console.log(object.e.id); // Outputs 123或state更改时仅重新呈现。在您的代码中 - 您不会改变您组件的props或state。

在您的情况下，您应该做的是在props 或将新项目添加到save或通过{{1}后重新获取项目}。

示例：

＆＃13;

state

＆＃13;

props

＆＃13;

Reactjs - 更新后setState不会重新渲染

1 个答案: