使用React.Component样式将过滤后的列表传递给同级

debugcn 发表于 Dev

不确定

有一个问题-下面的App函数具有一个'filteredUsers'方法，该方法每次通过时都会执行-因此，当设置了搜索状态时，它实际上将运行该方法，其结果将作为道具传递给'List'函数组件，一切都很好。如何将其更改为较旧的React.Component样式，使其仍然有效？（按照我下面的尝试）

const App = () => {
    const [text, setText] = React.useState('');
    const [search, setSearch] = React.useState('');

    const handleText = (event) => {
        setText(event.target.value);
    };

    const handleSearch = () => {
        setSearch(text);
    };

    console.log('*** App ***');         // each time as I type this is shown

    const filteredUsers = users.filter((user) => {
        console.log('Filter function is running ...');      // each time this is shown
        return user.name.toLowerCase().includes(search.toLowerCase());
    });

    return (
        <div>
            <input type="text" value={text} onChange={handleText} />
            <button type="button" onClick={handleSearch}>
                Search
            </button>

            <List list={filteredUsers} />
        </div>
    );
};

const List = ({ list }) => {
    return (
        <ul>
            {list.map((item) => (
                <ListItem key={item.id} item={item} />
            ))}
        </ul>
    );
};

const ListItem = ({ item }) => {
    return <li>{item.name}</li>;
};

然后，在等效的React.Component（App3）中，我正在尝试这样
做：现在，当我按下搜索按钮时，如何获取传递到List组件的过滤列表？

class App3 extends React.Component {
    state = {
        text: '',
        search: '',
    }
    handleText(event) {
        this.setState({ text: event.target.value });
    }
    handleSearch() {
        this.setState({ search: this.state.text });
    }
    filteredUsers = users.filter((user) => {
        console.log('Filter function is running ...');
        return user.name.toLowerCase().includes(this.state.search.toLowerCase());
    });
    render() {
        return (
            <div>
                <input type="text" value={this.state.text} onChange={this.handleText.bind(this)} />
                <button type="button" onClick={this.handleSearch.bind(this)}>
                    Search
                </button>

                <List list={this.filteredUsers} />
            </div>
        )
    }
}

devserkan

在第一个版本中，由于组件已渲染，因此filteredUsers变量在每个渲染中都会更新，因此您将获得过滤后的数据。您也可以useMemo在那里使用它，使其变得更好一些。

在您的第二个（类组件）版本中，此变量未更新。因此，您可以使其成为一个函数并调用它以传递listprop：

filteredUsers = () => // make function
  users.filter((user) => {
    console.log("Filter function is running ...");
    return user.name.toLowerCase().includes(this.state.search.toLowerCase());
  });

render() {
  return (
    <div>
      <input
        type="text"
        value={this.state.text}
        onChange={this.handleText.bind(this)}
      />
      <button type="button" onClick={this.handleSearch.bind(this)}>
        Search
      </button>

      <List list={this.filteredUsers()} /> // invoke
    </div>
  );
}

或者您可以将其移入render方法并分配给变量：

render() {
  const filteredUsers = users.filter((user) => {
    console.log("Filter function is running ...");
    return user.name.toLowerCase().includes(this.state.search.toLowerCase());
  });

  return (
    <div>
      <input
        type="text"
        value={this.state.text}
        onChange={this.handleText.bind(this)}
      />
      <button type="button" onClick={this.handleSearch.bind(this)}>
        Search
      </button>

      <List list={filteredUsers} />
    </div>
  );
}

但是，如果不是强制性的，则应使用第一个版本，因为类组件已不再是新组件的使用方式。

这是带有的版本useMemo：

const filteredUsers = React.useMemo(
  () =>
    users.filter((user) => {
      console.log("Filter function is running ..."); // each time this is shown
      return user.name.toLowerCase().includes(search.toLowerCase());
    }),
  [search]
);

在这种情况下，仅在search更改时才评估此变量，而不是在每个状态更改时才求值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。