Question

我已经将搜索栏设置为子组件，并为其传递了两个道具，一个是我正在渲染的纸牌阵列，另一个是函数，当搜索字段发生变化时应该设置State。

<Searchbar quesCards={questionCards} filter={this.filter} /> :

现在，此questionCards是一个状态变量，其中包含要显示的纸牌阵列。

questionCards.push(
     <QuestionCard
        id={i}
        question={question.question}
        answer={question.answer}
        isMarked={question.isMarked}
        isPublished={question.isPublished}
        validity={question.validity}
        category={question.category}
      />
  )

this.setState({ questionCards, newCards: questionCards, loading: false });

这里<QuestionCard />是另一个组件，但我认为与该问题无关。

在子组件内部，我调用this.props.filter，其过滤结果如下：

handleChange = name => event => {
  //filtering the data ...
  this.props.filter(newCards);
}

这是我在<Searchbar/>的onChange函数中进行的操作
回到父组件，

filter = (newCards) => {
  console.log(newCards); //displays the desired result
  this.setState({ newCards }); //the state changes, but is not rendered on screen
}

在此setState之后，组件应使用新结果重新渲染。但事实并非如此。
请注意，正在显示的是newCards，因为开头和questionCards仅用作prop的传递方式
我已经尝试过this.forceUpdate
另外，如果我在函数filter中进行控制台登录，则newCards包含正确的结果，但不会在this.setState({ newCards })之后重新呈现

Answer 1

我认为问题在于您的数据流效率低下。

您在searchBar中输入的过滤器，应更新某些过滤器状态（本地）。看起来只需要从您的过滤状态中过滤问题即可。

<SearchBar />的使用者不需要知道过滤器。

const list = questions.filter(item => (
  // item.name[enter_property] === this.state.filter
))

然后仅在列表上.map()。

—

您符合什么条件？一个或多个特定属性？

Answer 2

您正在生成这样的QuestionCard

save

但是，您更新newCards状态变量后，可以检查吗？

如果无法解决，您可以发布您的完整代码。

即使在this.setState

2 个答案: