如何使用输入的 onChange 方法更新 class-base 组件的 render()

Question

我已经将这些写入要搜索 JSON 文件的组件。第一个组件由两部分组成，1-it returns 表示 JSX 的元素和 2-it 通过 JSON 文件找到匹配项并将数据填充到 Const 并将其传递给另一个组件的 props创建以显示结果。问题是组件的 render() 方法没有重新加载新输入的数据，而变量正常工作，数据从第一个组件传递到第二个组件没有任何问题。

import react from 'react';
import React, { Component } from 'react';
import './index.css';
import ResultP from './ResultP';
import userData from './userData';

class SearchP extends Component {
    constructor(props){   
        super(props); 
        this.state = {
        SearchValue : "",
        MatchingItems : []
    }
}

    handleChange = (word)=> {
        const match = word.target.value;
        const Matches =  userData.filter((users) => {return users.name.includes(match);});
        this.setState({MatchingItems : Matches})
        console.log(this.state.MatchingItems);
    };

    render() {
        return (
            <div>
            <form className="my-form" >
            <input type="search" onChange={this.handleChange} 
            placeholder="Write your keyword here" />
            </form>
            <ResultP SearchString = {this.state.MatchingItems} /> 
            </div>
        )
    }
}
export default SearchP;

这是第一个组件。下面是第二个

import React, { Component } from 'react';

 class ResultP extends Component {
     constructor(props){
         super (props);
         this.state = {
         SearchString : this.props.SearchString,   
         }
     }
     
    render() {
        return (
             
           <section className="main-section">
             {this.state.SearchString}
            </section>
        
        )
    }
}
export default ResultP;

Answer 1

构造函数逻辑仅在组件最初呈现时执行一次，因此当您在构造函数中使用 prop 值初始化状态变量时，如果 prop 值发生变化，该状态变量将不会更新。您需要在子组件中添加 getDerivedStateFromProps 函数：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops. Here's an example: https://www.tutorialspoint.com/reactjs-getderivedstatefromprops-method

如何使用输入的 onChange 方法更新 class-base 组件的 render()

How to update render() of a class-base component using onChange method of an input

reactjs

components

react-class-based-component