反应状态更新但不在子组件上呈现

Question

我知道状态正在更新，因为 1.“正在加载...”正在消失，我可以通过控制台记录 this.state.images 来查看数组。然而，当状态更新和加载进行时，搜索栏会显示，但 CardList 中的卡片不会。

当我搜索正确的字符串时，它们确实会出现，但之前不会。

如果我将 this.state.images 传递给 CardList，它们会完美显示。但是，当我移动到过滤图像时，它们只会在过滤时显示。

有什么想法吗？提前致谢。

class App extends Component {

  constructor() {
    super();
    this.state = {
      images:[],
      searchfield: ''
    }
  }

  getLabels = (image) => {
    const AuthKey = key.key;
    const res = axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${AuthKey}`, {
      requests: [
        {
          image:{
            source:{
              imageUri: `http://storage.googleapis.com/${image}`
            }
          },
          features:[
            {
              type:"LABEL_DETECTION",
              maxResults:10
            }
          ]
        }
      ]
    });

    res.then(function (response) {
      const results = response.data.responses[0].labelAnnotations;
      const ex = results.map(result => {
        return result.description;
      }); 
      return ex;
    });

    return res;

  };

  componentDidMount() {
      imageFiles.imageFiles.forEach(img => {
        this.getLabels(img).then(result => {
          const results = result.data.responses[0].labelAnnotations;
          const labels = results.map(result => {
          return result.description;
        });
        //Add new values to the state 
        this.setState({images:[...this.state.images, {img, labels}]});
      });
    })
  }

  onSearchChange = (event) => {
    this.setState({searchfield: event.target.value});
  }

  render() {
    const filteredImages = this.state.images.filter(image => {
      return image.labels.includes(this.state.searchfield.toLowerCase());
    });
    // Create an array of objects to store the image path and the labels detected from Google Vision
    if (this.state.images.length === 0) {
      return <h1>Loading...</h1>
    } else {
      return (
        <Grid className="App">
          <SearchBox searchChange={this.onSearchChange}/>
          <CardList images={filteredImages} />
        </Grid>
      )}
  }

}

export default App;

Answer 1

 class App extends Component {

      constructor() {
        super();
        this.state = {
          images:[],
          searchfield: '',
          filteredImages:[]
        }
      }

      getLabels = (image) => {
        const AuthKey = key.key;
        const res = axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${AuthKey}`, {
          requests: [
            {
              image:{
                source:{
                  imageUri: `http://storage.googleapis.com/${image}`
                }
              },
              features:[
                {
                  type:"LABEL_DETECTION",
                  maxResults:10
                }
              ]
            }
          ]
        });

        res.then(function (response) {
          const results = response.data.responses[0].labelAnnotations;
          const ex = results.map(result => {
            return result.description;
          }); 
          return ex;
        });

        return res;

      };

      componentDidMount() {
          imageFiles.imageFiles.forEach(img => {
            this.getLabels(img).then(result => {
              const results = result.data.responses[0].labelAnnotations;
              const labels = results.map(result => {
              return result.description;
            });
            //Add new values to the state 
            this.setState({images:[...this.state.images, {img, labels}]});
this.setState({filteredImages:[...this.state.images, {img, labels}]});
          });
        })
      }

      onSearchChange = (event) => {
        this.setState({searchfield: event.target.value});
        let filteredImages = this.state.images.filter(image => {
            return image.labels.includes(this.state.searchfield.toLowerCase());
          });
        this.setState({filteredImages});
      }

      render() {

        // Create an array of objects to store the image path and the labels detected from Google Vision
        if (this.state.images.length === 0) {
          return <h1>Loading...</h1>
        } else {
          return (
            <Grid className="App">
              <SearchBox searchChange={this.onSearchChange}/>
              <CardList images={this.state.filteredImages} />
            </Grid>
          )}
      }

    }

    export default App;