小编Mic*_*ael的帖子

所以，我正在测试 JS includes() 方法，所以我创建了一个搜索输入字段，我可以在其中搜索我使用实时重新渲染创建的笔记。现在我的问题是：当我根本不传递搜索文本时，会显示所有注释，但是当我输入一个字符或单词时，这些注释会立即被过滤掉。示例代码：

const filters = {
  searchText: ''
}

// Render application notes
const renderNotes = (notes, filters) => {
  const filteredNotes = notes.filter((note) => {

    return note.title.toLowerCase().includes(filters.searchText.toLowerCase())
  })
  document.querySelector('#notes').innerHTML = ''

  filteredNotes.forEach((note) => {
    const noteEl = generateNoteDOM(note)
    document.querySelector('#notes').appendChild(noteEl)
  })
}

我从中了解到，在这种情况下总是返回 true .. 希望对此主题进行任何澄清！

谢谢！

我有一个页面，其中加载了一个下拉组件。该组件调用一个自定义钩子，该钩子使用反应查询来获取要在下拉列表中显示的数据。初始加载时，该组件处于加载状态并呈现加载图标。当react-query成功完成调用时，组件将数据列表呈现到下拉列表中。

const SelectItem = ({ handleSelectChange, selectedItem }) => {
  
  const { data, status } = useGetData(url, 'myQueryKey');

  if (status === 'loading') {
    return <RenderSkeleton />;
  }

  if (status === 'error') {
    return 'An Error has occured';
  }

  return (
    <>
      <Autocomplete
        options={data}
        getOptionLabel={(option) => `${option.name}`}
        value={selectedItem}
        onChange={(event, newValue) => {
          handleSelectChange(newValue);
        }}
        data-testid="select-data"
        renderInput={(params) => <TextField {...params}" />}
      />
    </>
  );
};

我如何正确测试这个？即使在实现 msw 来模拟响应数据之后，我的测试也仅呈现骨架组件。所以我假设它基本上只等待“isLoading”状态。

it('should load A Selectbox data', async () => {
  render(
    <QueryClientProvider client={queryClient}> …

我一直在寻找一个很好的解释,所以这一切都清楚了.例:

<Char click={()=>this.onDeleteHandler(index)}/>

VS

<Char click={this.onDeleteHandler()}/>

VS

<Person changed={(event) => this.nameChangedhandler(event, person.id)} />

和

<Char click={this.onDeleteHandler}/>

关于第三个代码,这里是名为:

nameChangedhandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
  return p.id === id;
});

// copying the person with the right index
const person = {
  ...this.state.persons[personIndex]
};

// Assigning new name to this person
person.name = event.target.value;

// copying array of persons, then manipulating the correct object of person by using the index
const persons = [...this.state.persons];
persons[personIndex]= person; …

我在一个类中有这个状态对象：

state = {
    ingredients: {
        salad: 1,
        bacon: 5, 
        cheese: 2, 
        meat: 2
    }
}

并希望将其转换为一个数组，该数组也获取值编号，如下所示：

const burger = (props) => {
const transformedIngredients = Object.keys(props.ingredients)
    .map(igKey => {
        return [...Array(props.ingredients[igKey])].map((_,i)=>{
           return <BurgerIngredient key={igKey + i} type={igKey}/>
        });
    });

    console.log(transformedIngredients)
    return(
        <div className={classes.Burger}> 
        <BurgerIngredient type="bread-top" />
        <BurgerIngredient type="cheese" />
        <BurgerIngredient type="meat" />
        <BurgerIngredient type="bread-bottom" />
    </div>
  );
};
export default burger;

我按照教程成功地做到了，老实说我不完全理解这里发生了什么。特别是这部分：

return [...Array(props.ingredients[igKey])].map((_,i)=>{
       return <BurgerIngredient key={igKey + i} type={igKey}/>
    });

任何帮助将不胜感激！谢谢！