React / Redux：如何将此状态从一个组件传递到另一个文件？

Question

I'm a beginner in React and Redux. I've been working on this project where I finally figured out how to store an array as a state. Now, the only problem I'm having is, trying to figure out how to pass that state to another file.

Here are the two files -Hue.js -ColorShop.js

In Hue.js, I made an API and saved the contents into an array of objects called productJSON

Hue.js

class Hue extends React.Component {
    constructor() {
        super();
        this.state = {
            productJSON: []
        };
    }
    componentWillMount() {
    fetch('numberendpoint.json')
    .then(results => {
        return results.json();
    }).then(data => {
        let colorArray = [] //initialize array to receive json data
        for (let i =0; i < data.length; i++) {
            colorArray.push(data[i])

        }
    let productJSON = JSON.stringify(productArray)
        this.setState({productJSON: productJSON});
    })
    }

    render() {
      return (
        <div>
        <div className="container2">
        {this.state.productJSON}
    </div>
    </div>

)
}
}

Now, I'm trying to pass productJSON to another file in the same folder, ColorShop.js. I need to replace _colors (which was reading from a static json file) with productJSON.

ColorShop.js

import Hue from './Hue.js'

const TIMEOUT = 100

Hue productJSON={this.state.productJSON} <---- my attempt to get it to work

export default { // I need to replace '_colors' with productJSON
  getColors: (cb, timeout) => setTimeout(() => cb(_colors), timeout || TIMEOUT),
}

I don't want to make another class in ColorShop.js, I just want to import this.state.productJSON into it, is that possible? Any pointers are greatly appreciated!!

Update: used the solution suggested by Rahamin. Now I have this code below, all contained within the the "Hue" class. But I'm still getting errors.

import React from 'react'

const TIMEOUT = 100

let productJSON;
class Hue extends React.Component {
  constructor() {
    super();
    this.state = {
      products: [],
    };
    this.getColors = this.getColors.bind(this)
  }
  componentDidMount() {
    fetch('http://tech.work.co/shopping-cart/products.json')
      .then(results => {
        return results.json();
      }).then(data => {

    let colorArray = []
    for (let i =0; i < data.length; i++) {
      colorArray.push(data[i])
      }
    console.log("jsonproduct=" + JSON.stringify(productArray))

    productJSON = JSON.stringify(colorArray)

   this.setState({productJSON: productJSON});

  });
  }

  render() {
    return (
      <div>
        <div className="container2">
          {this.state.productJSON}
        </div>
      </div>
      )
    }
}


export default {
  getColors: (cb, timeout) => setTimeout(() => cb(({ productJSON: value})), timeout || TIMEOUT), // here is where I am getting an error -- "value" is undefined. I'm not sure I was meant to put "value" there or something else...very new to React so its conventions are still foreign to me.
}

Answer 1

What do you want to do? If the 'other file' is a helper function, you can just pass it a parameter, as you do in any function in any programming language:

From Hue you call colorShop(productsJson) and get back a result that you can render in Hue ( colorShop starting with a lowercase character, otherwise React will think it is a component). It seems that the 'other file' can just be a function in the Hue.js file...

ColorShop can also be a component that gets productsJson as a prop and renders it after modification. ColorShop doesn't need to be a class, it can be a functional component. But this doesn't seem to be required by your example.

Here is the code (not complete - see comments) after inserting colorShop as a function into the class component. And you can pass it a value and get a returned value, or have it set the state, whatever you like:

import React from 'react';

const TIMEOUT = 100;

class Hue extends React.Component {

  constructor() {
    super();
    this.state = {
        productJSON: []
    };
    this.getColors = this.getColors.bind(this);
  }
  componentWillMount() {
    fetch('numberendpoint.json')
      .then(results => {
          return results.json();
      }).then(data => {
          let colorArray = []; //initialize array to receive json data
          for (let i = 0; i < data.length; i++) {
            colorArray.push(data[i]);
          }
      let productJSON = JSON.stringify(productArray);
          this.setState({ productJSON: productJSON });
      });
    }

    render() {

      // call getColor from wherver you need to call it.
      // for example:
      // getColors();

      return (
        <div>
          <div className="container2">
            {this.state.productJSON}
          </div>
        </div>
      );
    }

  getColors(cb, timeout) {
    setTimeout(() => cb(colors), timeout || TIMEOUT);

    // Here you can setState({ productJSON: value });
    // Or you can return a value to the caller
  }