Home / Questions / 330999
Accepted
Fabian
Asked: 2020-02-21 07:17:27 +0800 CST 2020-02-21 07:17:27 +0800 CST

怀疑 useState 作为带有数组的对象

  • 772

我有点怀疑，我有这样的状态

const [searchItems, setSearchItems] = useState({
    videos: [],
    texts: [],
    audios: []
});

我的想法是将这些数组推送到对象searchItems中，如果它是纯 javascript，它将类似于seachItems.videos.push(object)

但作为一个有 useState 的州，我必须利用setSearchItems

有谁知道该怎么做？

我有类似的东西

setSearchItems({
    videos: test_search.videos.filter(video =>
        video.name.includes(search)
    )
});

但它根本不起作用。

我设法解决了它，但现在我遇到了另一个问题。我有这个代码

useEffect(() => {
    if (showVideos) {
        setSearchItems({
            ...searchItems,
            videos: test_search.videos.filter(video =>
                video.name.includes(search)
            )
        });
    }
    if (showTexts) {
        setSearchItems({
            ...searchItems,
            texts: test_search.texts.filter(text =>
                text.name.includes(search)
            )
        });
    }
    if (showAudios) {
        setSearchItems({
            ...searchItems,
            audios: test_search.audios.filter(audio =>
                audio.name.includes(search)
            )
        });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [search, showVideos, showTexts, showAudios]);

问题是它只分配最后一个，在这种情况下，音频，其他的都是空的，我怎么能解决这个问题？

事先非常感谢您。

reactjs

3 Answers

  1. Best Answer

    当您使用 setSearchItems 函数时，您必须传递整个对象，而不仅仅是本例中的视频。您可以做的是使用扩展运算符 (...) 来复制对象并替换您想要的对象的字段（在这种情况下为视频）。

    例子：

    setSearchItems({...searchItems,
                videos: test_search.videos.filter(video =>
                          video.name.includes(search)
                         )
})

    有了这个，您所做的就是复制 searchItems 对象并将视频的值替换为您使用该过滤器指示的值。

    我希望这个对你有用。问候。

    • 4

  2. 假设您要在水果列表中进行搜索：

    html中的代码：

    <div id="content"></div>

    ------------搜索组件代码

    var DynamicSearch = React.createClass({

  //estado inicial
  getInitialState: function(){
    return { searchString: '' };
  },

  // aqui el valor de tu texto de busqueda
  handleChange: function(event){
      this.setState({searchString:event.target.value});
  },

  render: function() {

    var fruits= this.props.items;
    var searchString = this.state.searchString.trim().toLowerCase();

    //filtrado de lista
    if(searchString.length > 0){
      fruits = fruits.filter(function(fruit){
        return fruit.name.toLowerCase().match( searchString );
      });
    }

    return (
      <div>
        <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Search!" />
        <ul>
          { fruits.map(function(fruit){ return <li>{fruit.name} </li> }) }
        </ul>
      </div>
    )
  }

});

var fruits= [
  {"name": "Manzana"}, {"name": "Platano"}, {"name": "Uva"}, {"name": "Naranja"},
  {"name": "Fresa"}, {"name": "Ciruelo"}, {"name": "Pera"}
];

React.render(
  <DynamicSearch items={ fruits} />,
  document.getElementById('content')
);
    • 1

  3. 我建议你做的是使用扩展运算符，即...elementos能够获得对象元素的副本，也可以利用解构来分解对象，从而方便其处理。

    现在，假设您的视频数组有一个新元素：mivideo我们需要将其推送或插入到我们的数组videos中。

    我们要做的是：

    // Nuestro State con previa data para el ejemplo
const [searchItems, setSearchItems] = useState({
    videos: [{id: 1, title: 'Video 1'}],
    texts: [{id: 1, title: 'Texto 1'}],
    audios: [{id: 1, title: 'Audio 1'}]
});

// Aplicamos DESESTRUCTURACIÓN
const {videos, texts, audios} = searchItems;

    现在，我们继续添加它：

        // Nuestro elemento a insertar
    let mivideo = {
        id: 2,
        title: 'Video 2'
    };

    // Agrega el elemento a nuestro array
    videos.push(mivideo);

    // Actualizamos el estado con nuestro array
    setSearchItems({
        ...searchItems, // Obtenemos elementos con un spread operator
        videos // Reemplazamos array de videos
    });

    离开：

    输出反应js

    您会注意到，我们的视频数组中添加了一个新项目。同样，你可以push给别人做一个arrays。

    • 0