Когда пользователь вводит текст, проходящий через реквизиты из другого компонента, не работает в реагировать JS

Question

Я пытаюсь объединить данные, введенные в текстовое поле, передавая данные из другого компонента без сохранения состояния, используя реквизиты.Не уверен, почему он не работает.

Я создал два компонента

1. app.js 2. title.js Данные, введенные в поле ввода, должны объединять каждую строкувремя и отображение динамически с использованием реквизита.

   App.js

   import React, { Component } from 'react';
   import logo from './logo.svg';
   import './App.css';
   import Home from './Home';
   import Title from './Title';
   
   class App extends Component {
   
     constructor(props)
     {
       super(props);
       this.state =
       {
         text : ' ',
         collection: []
       }
       this.eventHandler = this.eventHandler.bind(this);
       this.eventSubmit = this.eventSubmit.bind(this);
   
     }
   
     eventHandler(event)
   {
   
     this.setState(
       {text:event.target.value}
       )
   }
   
   eventSubmit(event)
   {
     this.setState(
       {collection:this.state.collection.concat(this.state.text)}
       )
   
   }
   
     render() {
      return (
         <div className="App">
         <input type="text" onChange ={this.eventHandler}  />
         <p> {this.state.text} </p>
         <input type="submit" onClick={this.eventSubmit} />  
         <title collection={this.state.collection} />
         </div>
       );
     }
   }
   export default App;
   

   Title.js

   import React from 'react';
   
   const title = (props) =>
   {
   
   return (
       <div>
       <h1> {this.props.collection.toString()} </h1>
       <h1> hello </h1>
       </div>
   );
   }
   export default title;
   

Answer 1

Мутации в целом плохие и могут привести к побочным эффектам, вместо этого используйте оператор распространения (...) для копирования массива prevState.

eventSubmit(event) {
    this.setState((prevState) => ({
        collection: [...prevState.collection, prevState.text]
    }));
}

Таким образом вы добавляете данные в массив и обновляете состояние

Answer 2

Instead of stateless component I have created class component and it worked. Can someone explain me why it didn't worked with stateless why it worked now.

App.js

<code>
        import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home';
import Title from './Title';
import Collection from './Collection';

class App extends React.Component {
  constructor(props)
  {
    super(props);
    this.state =
    {
      text : ' ',
      collection: []
    }
    this.eventHandler = this.eventHandler.bind(this);
    this.eventSubmit = this.eventSubmit.bind(this);  
  }

eventHandler(event)
{
this.setState(
{text:event.target.value}
    )
}
eventSubmit(event)
{
  this.setState(
    {collection:this.state.collection.concat(this.state.text)}
   )

}
  render() {
    return (
      <div className="App">

      <h1> ramesh </h1>
      <input type="text" onChange ={this.eventHandler}  />
      <p> {this.state.text} </p>
      <input type="submit" onClick={this.eventSubmit} />  
      <title name ={this.state.collection} />
      <Collection name={this.state.collection} />
      </div>
    );
  }
}
export default App;

</code>

Collection.js

<code>
import React, {Component} from 'react';

class Collection extends React.Component
{
    render()
    {
        return( 

            <div>
            <h1> {this.props.name.toString()} </h1>
            </div>

         );
    }
}
export default Collection;
</code>

Answer 3

setState является асинхронным, и когда вы используете this.state внутри него, он может не выполнить повторную визуализацию.Вместо этого используйте функцию внутри setState:

eventSubmit(event) {
    this.setState((prevState, props) => ({
        collection: prevState.collection.concat(prevState.text)
    }));
}

См. 3. setState () является асинхронным: https://codeburst.io/how-to-not-react-common-anti-patterns-and-gotchas-in-react-40141fe0dcd