状态更新没有反映在映射的元素上

Question

在下面的代码中，tags是在set状态之后完美地显示出来的，但没有反映在DOM更改上。

在下面的代码中，tags是在set状态之后完美地显示出来的，但没有反映在DOM更改上。

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.css';
import PasteImage from './components/builder/q-img-paste';
import PreTag from './components/builder/q-pre-tag'
import QuestionDisplay from './components/builder/q-display';

class App extends React.Component{
  
  state = {
    questions : [],
    pretag : ""
  }  

  addImage (q){
    this.setState({
      questions : [q, ...this.state.questions]
    })
  }

  updatePretag(q){
    this.setState({pretag: q})
    // Here, it is working perfectly
    // Here, it is working perfectly
    // Here, it is working perfectly        
    console.log(this.state.pretag) 
    // Here, it is working perfectly
    // Here, it is working perfectly
    // Here, it is working perfectly
  }

  render (){
    return (
      <React.Fragment>
        <PreTag updatePretag={(p) => this.updatePretag(p)}/>
        <PasteImage addImage={(q) => this.addImage(q)} preTag={this.state.preTag} />
        <div className="row" id="img-display">
          {
             this.state.questions.map(q => 
              {
                // This is not shown here
                // This is not shown here
                // This is not shown here
                // This is not shown here
                console.log(this.state.pretag); 
                // This is not shown here
                // This is not shown here
                // This is not shown here
                // This is not shown here
                return <QuestionDisplay key={q["id"]} url={q["url"]} 
                id={q["id"]} tags={q["tags"]} />
              })
          }
        </div>
      </React.Fragment>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Answer 1

您有一个包含数组和字符串的状态。您将在JSX中映射数组问题，因此它只会反映问题状态的更改，而不会呈现或反映问题字符串中的任何更改。您正在通过this.state.question.map访问问题

并且没有状态preTag，你没有映射它。